Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨著屏幕設備或視口（viewport）尺寸的增加，系統會自動分為最多12列。

總結一下我近期的學習Bootstrap的一些理解：

一、.col-xs-1, .col-sm-1, .col-md-1 這些都是什麽意思？

.col-xs-超小屏幕 手機 (<768px)。

.col-sm-小屏幕 平板 (≥768px)。

.col-md-中等屏幕 桌面顯示器 (≥992px)。

不管在哪種屏幕上，柵格系統都會自動的分12列 col-xs-*和col-sm-* 和col-md-*後面跟的參數表示在當前的屏幕中 div占的寬度。

二、一行顯示多個標簽，form-group 標示一行，如果需要一行顯示多個標簽，可以在form-group 裏面分隔。

效果如圖

基本代碼

    <form role="form">
    <div class="panel panel-info">
        <div class="form-group">
            <label class="col-sm-1 control-label text-right" for="ds_host">
                單位名稱:</label>
            <div class
 
="col-sm-3">
                <input class="form-control" id="dwmc" type="text" placeholder="單位名稱" />
            </div>
            <label class="col-sm-1 control-label text-right" for="ds_name">
                專業類別:</label>
            <div class="col-sm-3">
                <select
 
 id="sl_zylb" class="selectpicker">
                    <option value="0">全部</option>
                </select>
            </div>
            <label class="col-sm-1 control-label text-right" for="ds_host">
                科室:</label>
            <div class="col-sm-3">
                <select id="sl_ks" class="selectpicker" data-live-search="false" multiple="multiple">
                    <option value="0" selected="selected">全部</option>
                </select>
            </div>
        </div>
    </div>
    </form>

Bootstrap 柵格系統簡單整理