如何讓4個容器使用Bootstrap 3在線顯示

我有以下Bootstrap標記和下面的屏幕截圖。我希望整個（4）組的項目出現在一行中，不要中斷。我已經調整了幾個小時，並且無法實現。是否有可能讓他們全部排成一排？如何讓4個容器使用Bootstrap 3在線顯示

<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 -->

來源

2015-11-11 H. Ferrence

的事情之一，以瞭解自舉是當不使用引導:-)

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

將它們全部浮起;
讓他們都在，線塊
使用Flexbox的與老年人IE瀏覽器（IE條件CSS）回退到上述方法

Flexbox的可能就是我會用http://caniuse.com/#feat=flexbox，https://css-tricks.com/snippets/css/a-guide-to-flexbox/一個但內聯塊可能只是做到這一點;無論如何，如果您需要，您可以使用自己的媒體查詢來更改顯示格式。

來源

2015-11-11 17:01:01 bknights

如何讓4個容器使用Bootstrap 3在線顯示

回答

相關問題