jQuery 引导日期时间选择器样式未正确应用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29371227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap datetimepicker styles not applied correctly
提问by Osuwariboy
I'm having a bit of trouble making this bootstrap datetimepicker work:
我在使这个 bootstrap datetimepicker 工作时遇到了一些麻烦：
http://eonasdan.github.io/bootstrap-datetimepicker/
http://eonasdan.github.io/bootstrap-datetimepicker/
I made a very basic page, here's the code:
我做了一个非常基本的页面，这是代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#datetimepicker1').datetimepicker();
});
</script>
</head>
<body>
<div class='col-sm-2'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</body>
</html>
Now, it's not like the plugin doesn't work, it's more like some styles are not applied correctly. Here's a picture to better illustrate what I mean. On the left is what I have and on the right is what I actually want:
现在，这不是插件不起作用，更像是某些样式没有正确应用。这是一张图片，可以更好地说明我的意思。左边是我拥有的，右边是我真正想要的：
As you can see, everything's aligned left instead of centered and things are narrower. Also, there's no hover effect when I run my mouse over the calendar and the current day is not outlined properly. Can anyone tell me what I'm doing wrong?
如您所见，所有内容都向左对齐而不是居中对齐，并且内容更窄。此外，当我将鼠标悬停在日历上时没有悬停效果，并且当前日期未正确勾画。谁能告诉我我做错了什么？
回答by KyleMit
From your screenshot, it looks like you're not pulling in the bootstrap-datetimepicker.csslibrary. Take a look at your console and make sure you don't have any errors and the library exists in the folder it's looking for and has all the appropriate contents.
从您的屏幕截图来看，您似乎没有引入bootstrap-datetimepicker.css库。查看您的控制台并确保您没有任何错误，并且该库存在于它要查找的文件夹中并且包含所有适当的内容。
It won't look awfulwithout the extra css because bootstrap is doing most of the heavy lifting and plugins are usually just taking advantage of Bootstrap's classes and adding a couple of their own to box it all up.
如果没有额外的 css，它看起来不会很糟糕，因为 bootstrap 正在完成大部分繁重的工作，而插件通常只是利用 Bootstrap 的类并添加一些自己的类来装箱。
WithLibrary - Working
与图书馆 - 工作
$(function() {
$('#datetimepicker1').datetimepicker();
});<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>WithoutLibrary - Broken
没有图书馆 - 坏了
$(function() {
$('#datetimepicker1').datetimepicker();
});<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-xs-4'>
<div class='input-group' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>P.S.- It's hard to debug since we have no way of knowing what the files look like in your local
/js/folder. In the future, I would suggest using CDN's for online samples so it's easier to share what you're looking at with others. You can grab distributable static files with cdnjs here:
PS- 很难调试，因为我们无法知道本地
/js/文件夹中的文件是什么样的。将来，我建议将 CDN 用于在线示例，以便更轻松地与他人分享您正在查看的内容。您可以在此处使用 cdnjs 获取可分发的静态文件：
回答by Osuwariboy
Thanks Kyle, you were right, I wasn't pulling the CSS styles. Though it's not because I wasn't including it... rather it was a mistake in my include statement. This is what I had:
谢谢凯尔，你是对的，我没有拉 CSS 样式。虽然这不是因为我没有包含它......而是我的包含声明中的一个错误。这就是我所拥有的：
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">
I accidentally put 'src' instead of 'href', so here's what I should have put:
我不小心放了“src”而不是“href”，所以这是我应该放的：
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
Thanks for pointing me in the right direction :)
感谢您为我指明正确的方向:)
回答by Dana Jones
I had this same symptom, because of the same issue of styles not loading. In my case, my app is a Rails 5 application, and in my application.cssfile, I had
我有同样的症状，因为同样的样式没有加载。就我而言，我的应用程序是一个 Rails 5 应用程序，在我的application.css文件中，我有
*= require_bootstrap-datetimepicker
*= require_bootstrap-datetimepicker
instead of
代替
*= require bootstrap-datetimepicker
*= require bootstrap-datetimepicker
Making that correction fixed it for me.
进行该更正为我修复了它。
回答by sujay
Disclaimer: I see a lot of good answers. This answer is specific to RAILS 6 and Webpacker 4+, I was having this issue specifically in rails 6 and webpacker. Posting this one for this case, as I didn't find it.
免责声明：我看到很多好的答案。这个答案特定于 RAILS 6 和 Webpacker 4+，我在 rails 6 和 webpacker 中特别遇到了这个问题。为这个案例发布这个，因为我没有找到它。
If you have installed bootstrap-datepickeras a yarnpackage
your bootstrap-datepicker is installed in node_modules/bootstrap-datepicker
如果您已bootstrap-datepicker作为yarn软件包安装，则bootstrap-datepicker 安装在node_modules/bootstrap-datepicker
The JS initialization can be done in application.js -> $('.datepicker').datepicker()
JS 初始化可以在 application.js -> $('.datepicker').datepicker()
But the stylingwill only kick in after you add the following line in application.css (at least this is the issue I was facing)
但是样式只会在您在 application.css 中添加以下行后才会生效（至少这是我面临的问题）
@import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css";
references: Bootstrap-datepicker
参考资料： Bootstrap-datepicker
The above doc mentions about CSS but it has no recommendations that we need to explicitly import it.
上面的文档提到了 CSS，但没有建议我们需要明确导入它。
Hope this helps! happy coding!
希望这可以帮助！快乐编码！
