twitter-bootstrap Bootstrap DatePicker CSS 样式不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30037967/
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 DatePicker CSS Styling not Working
提问by Jared
I am trying to use the datepicker from the datepickersite, but the CSS is not working as it should.
我正在尝试使用datepicker站点中的datepicker，但 CSS 无法正常工作。
Here is my output and what I want it to look like:
这是我的输出以及我想要的样子：
Here's a jsFiddle hereand the relevant code:
这里有一个jsFiddle和相关代码：
<div class="input-daterange">
<input type="text" class="input" value="2012-04-05" />
<span class="add-on">to</span>
<input type="text" class="input" value="2012-04-19" />
<button type="submit" class="btn btn-default" id='submit'>Submit</button>
</div>
But I can't tell what part of the css is being overridden to change the display of the datepicker.
但我无法判断 css 的哪一部分被覆盖以更改日期选择器的显示。
采纳答案by KyleMit
The classes changed from Bootstrap 2 to Bootstrap 3
类从 Bootstrap 2 更改为 Bootstrap 3
The date range markup in the docsis out of date for bootstrap 2:
<div class="input-daterange">
<input type="text" class="input-small" />
<span class="add-on">to</span>
<input type="text" class="input-small" />
</div>
But if you go to the online demo with input ranges, you can see the correct markup:
但是，如果您使用 input range访问在线演示，则可以看到正确的标记：
<div class="input-daterange input-group">
<input type="text" class="input-sm form-control" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" />
</div>
Demo in Stack Snippets
堆栈片段中的演示
<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-datepicker/1.3.1/css/datepicker.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/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>I'll leave adding a button as an exercise for the reader, but check out how to style input group buttons in Bootstrap
我将添加一个按钮作为读者练习，但请查看如何在 Bootstrap 中设置输入组按钮的样式
