如何将我的选择保留在一行而不是堆叠在Bootstrap中？

Question

我在表单上使用了一个表单内联类，它在桌面上看起来很棒。但是当我到达XS宽度时，一切都堆叠在一起，但它是不必要的。我只需要每个表单组进行堆叠，而不是每个表单内的表单输入。

我想在一行中选择3个日期，在下面的新行中选择2个。

我的HTML：

<form class="form-inline">
  <div class="form-group">        
    <label for="exampleInputName2">Passengers</label><br />
    <input type="text" class="form-control" id="exampleInputName2" placeholder="2">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Departure Date / Time</label><br />
    <select class="form-control" style="max-width:100px"><option>31</option></select>
    <select class="form-control" style="max-width:100px"><option>Jan</option></select>
    <select class="form-control" style="max-width:100px"><option>2015</option></select> <strong>at</strong>
    <select class="form-control" style="max-width:100px"><option>12</option></select> <strong>:</strong>
    <select class="form-control" style="max-width:100px"><option>00</option></select>

  </div>

</form>  

Answer 1

.inline-form状态的Bootstrap示例：

  

为左对齐和内联块控件添加.form-inline到您的表单（不一定是a）。 这仅适用于视口中至少宽度为768像素的表单。

它们包含的CSS是：

@media (min-width: 768px)
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;

所以这就是为什么表格在小分辨率下变为垂直的原因。 您应该能够通过添加CSS来阻止此行为：

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;

（与Bootstrap的CSS相同，但没有媒体查询）