如何使用 Bootstrap 3 让 4 个容器内联显示答案

【问题标题】：How to get a 4 containers to display in-line using Bootstrap 3如何使用 Bootstrap 3 让 4 个容器内联显示
【发布时间】：2016-02-12 12:41:06
【问题描述】：

我有以下引导标记和下面的屏幕截图。我希望整个 (4) 个项目组出现在一行中而不是中断。我已经调整了几个小时，但无法实现。是否可以让它们全部对齐在 1 行中？

<div class="container-fluid">
  <div id="sys-page-headerBar-container">
    <div class="row">

      <!--<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> <!-- left gutter -->

      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

<!-- header -->
<form class="form-horizontal" method="post">
<fieldset>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="report_date">Service Date(s):</label>
  <div class="col-md-2" id="dispatchLog-container">
    <div class="input-daterange input-group" id="datepicker">
      <input type="text" class="input-sm form-control" name="start" value="<?php echo date( DATE_SZ, strtotime( "today" ) ); ?>" tabindex="1" />
      <span class="input-group-addon">to</span>
      <input type="text" class="input-sm form-control" name="end" value="<?php echo date( DATE_SZ, strtotime( "today" ) ); ?>" tabindex="2" />
    </div>
  </div>
  <label class="col-md-2 control-label" for="report_time">Service Time:</label>
  <div class="input-group bootstrap-timepicker timepicker col-md-1">
    <input id="timepicker" type="text" class="form-control input-small" data-minute-step="30" name="tour_time" tabindex="3"><input type="hidden" id="tour_time_value" value="<?php echo date( DATE_TP, strtotime( "12:00 AM" ) ); ?>">
    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
  </div>
  <label class="col-md-1 control-label" for="report_order">Sort Order:</label>
  <div class="col-md-1">
    <select id="report_order" name="report_order" class="form-control" tabindex="4">
    <option></option>
    </select>
  </div>
  <div class="col-md-1">
    <button id="submit" name="submit" class="btn btn-default" value="1" tabindex="5">Go</button>
  </div>
</div>

</fieldset>
</form>

      </div> <!-- .col-xs-10.col-sm-10.col-md-10.col-lg-10 -->

      <!--<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div> <!-- right gutter -->

    </div> <!-- .row -->
  </div> <!-- #sys-login-container -->
</div> <!-- .container-fluid -->

【问题讨论】：

标签： twitter-bootstrap-3 inline col

【解决方案1】：

关于 bootstrap 要了解的一件事是什么时候不使用 bootstrap :-)

在您的情况下，只需使用您自己的 css。你可以：

全部浮动；
将它们全部嵌入块中
使用 flexbox 和旧 IE（IE 条件 css）回退到上述方法之一

Flexbox 可能是我会使用的 http://caniuse.com/#feat=flexbox, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 但 inline-block 可能只是这样做；在任何情况下，您都可以根据需要使用自己的媒体查询来更改显示格式。

【讨论】：