twitter-bootstrap 使用引导程序 3 在同一行获取两个日期时间选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21401415/
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
Getting two date time pickers on the same line with bootstrap 3?
提问by RegDHunter
I'm using eonasdan datetimepickerand bootstrap 3. I've got one datetimepickerset as calendar and the other as time. I'd like to be able to have them side by side on the same line. But I can't quite figure it out without breaking the datetimepicker. Here is my code:
我正在使用 eonasdandatetimepicker和 bootstrap 3。我有一datetimepicker组作为日历，另一组作为时间。我希望能够让它们并排在同一条线上。但是如果不破坏datetimepicker. 这是我的代码：
<form role="form">
<div class="form-group">
<div class="form-group">
<label for="class">Class:</label> <select multiple
class="form-control" size="2">
<option value="1">Class 1</option>
<option value="2">Class 2</option>
</select>
</div>
<div class="form-group">
</div>
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date" id="startDate">
<input type='text' class="form-control" /> <span
class="input-group-addon"><span
class="glyphicon glyphicon-calendar"></span> </span>
</div>
</div>
<div class="form-group">
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" /> <span
class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
And here is a JSFiddle where the date picker doesn't work but other than that OK. I also can't force the multiple select to only be 2 rows high for some reason?
这是一个 JSFiddle，其中日期选择器不起作用，但除此之外 OK。由于某种原因，我也不能强制多重选择只有 2 行高？
采纳答案by Praveen
This seems to be a cssissue, which can be overridden. Put both datepickerand Timepickerwithin a divlike
这似乎是一个css问题，可以被覆盖。把两个datepicker和Timepicker一个内div像
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date " id="startDate">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
Then use CSS:
然后使用CSS：
#startDate, #startTime {
width: 50%;
float: left;
}
Note:use % value for width to keep it as responsive
注意：使用 % 值作为宽度以保持其响应性
JSFiddle
JSFiddle
回答by caniz
Could you please check. http://jsfiddle.net/6FcBT/2/
你能不能检查一下。http://jsfiddle.net/6FcBT/2/
<div class="form-group">
<!-- Date Picker -->
<div class="input-group date" id="startDate">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" />
</span>
<!-- Time Picker -->
<div class="input-group date" id="startTime">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time" />
</span>
</div>
</div>
</div><!--end form-group-->
You don't need multiple form group element. If you use one of them you can see the datepicker elements side by side.
您不需要多个表单组元素。如果您使用其中之一，您可以并排看到日期选择器元素。
