Бутстрап-столбцы - выравнивание содержимого слева

Question

Я пытаюсь выровнять содержимое столбцов влево. Я использую столбцы начальной загрузки и float divs для сравнения. Вот мой самозагрузки разметки:

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

и плавающие дивы:

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> 

Результат выглядит следующим образом:

Возможно ли, чтобы содержимое верхней строки смещалось влево, как во втором?

Благодаря

Answer 1

К сожалению, система Сетка Bootstrap (в строки и столбцы) на самом деле не работает. Сетка работает скорее как таблица, чем плавающая 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 Пример: http://output.jsbin.com/zuyumimaqu

Обратите внимание, что:

Это относится только к формам в пределах видовых, которые, по крайней мере 768px в ширину.

Это означает, что они станут вертикальными формами, если ширина экрана зрителя меньше 768 пикселей.

В противном случае вам, возможно, придется прибегнуть к реализации float div.