ブートストラップカラム - コンテンツを左に揃える

Question

カラムの内容を左に揃えようとしています。 私は、比較するためにブートストラップカラムとフロートdivを使用しています。ここ は私のブートストラップのマークアップです：

<div class="row no-gutter" style="margin:0;padding:5px 0"> 
    <div> 
     <div class="col-xs-1"> 
      <span"> 
       Case # 
      </span> 
     </div> 
     <div class="col-md-1"> 
      <input easyui-textbox readonly ng-model="caseid" data-options="font_size:'12'" 
        style="height:30px;width:50px"> 
     </div> 
     <div class="col-xs-1"> 
      <span"> 
       Title 
      </span> 
     </div> 
     <div class="col-md-7"> 
      <input easyui-textbox data-options="validType:'maxLength[128]',required:true,font_size:'11'" 
        ng-model="title" style="height:30px;"> 
     </div> 
    </div> 
</div> 

と浮動のdiv：

CSS：

.col-float{ 
    float:left; 
} 
.col-float1{ 
    width: 5%; 
} 
.col-float3{ 
    width: 10%; 
} 

HTML：

<div class="row" style="margin:0;padding:5px 0">           
       <div> 
        <div class="col-float col-float1"> 
         <span> 
          State 
         </span> 
        </div> 
        <div class="col-float col-float3"> 
         <input easyui-combobox ng-model="caseStateList" selectedvalue="casestate" 
           style="width:75px;"> 
        </div> 
        <div class="col-float col-float1"> 
         Priority 
        </div> 
        <div class="col-float col-float3"> 
         <input easyui-combobox ng-model="casePriorityList" selectedvalue="priorityid" 
           style="width:75px;"> 
        </div> 
        <div class="col-float col-float1"> 
         Assign 
        </div> 
        <div class="col-float col-float3"> 
         <input easyui-combobox ng-model="userPrefList" selectedvalue="assignuser" panelHeight="200px" panelWidth="200px" 
           filter="hideDeletedUsers" style="width:130px;"> 
        </div> 
       </div> 
      </div> 

結果は次のようになります。

上位行のコンテンツを2番目のように左にシフトさせることは可能ですか？

おかげ

Answer 1

は残念ながら、ブートストラップのグリッドシステム（行と列）は、実際にそのように動作しません。グリッドシステムは、浮動小数点表よりもテーブルのように機能します。div

同様の効果を得るには、ブートストラップのforms-inlineを使用することを検討してください。

<form class="form-inline"> 
    <div class="form-group"> 
    <label>Case # <input type="text"></label> 
    </div> 
    <div class="form-group"> 
    <label>Title 
     <input easyui-textbox data-options="validType:'maxLength[128]',required:true,font_size:'11'" 
      ng-model="title" style="height:30px;"> 
    </label> 
    </div> 
</form> 

JSBin例：これは、少なくとも768px広いビューポート内の形態に適用

：ことhttp://output.jsbin.com/zuyumimaqu

注意。

これは、視聴者の画面の幅が768px未満の場合、縦形になることを意味します。

それ以外の場合は、float divの実装に頼る必要があります。