引導窗體設計間距問題

Question

如何擺脫突出顯示的空間並使最後兩行與前兩個對齊？

以下是HTML

<div class="col-md-6"> 

    <div class="row"> 
     <div class="form-group mb"> 
      <label class="col-sm-3 control-label input-sm">Claim Ref</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group mb"> 
      <label class="col-sm-3 control-label input-sm">File Note Date</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 

</div> 

<div class="col-md-6"> 

    <div class="row"> 
     <div class="form-group mb"> 
      <label class="col-sm-3 control-label input-sm">Created By</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="form-group mb"> 
      <label class="col-sm-3 control-label input-sm">Created Date</label> 
      <div class="col-sm-9"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 

</div> 

<div class="col-md-12"> 

    <div class="row"> 
     <div class="form-group mb"> 
      <label class="col-sm-2 control-label input-sm">Short Description</label> 
      <div class="col-sm-10"> 
       <input type="text" class="form-control" /> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="form-group mb"> 
      <label class="col-sm-2 control-label input-sm">Detail</label> 
      <div class="col-sm-10"> 
       <textarea class="form-control"></textarea> 
      </div> 
     </div> 
    </div> 
    <br /> 
    <div class="footer text-right"> 
     <button type="button" class="mb-sm btn btn-default">Discard Changes</button> 
     <button type="submit" class="mb-sm btn btn-primary">Save Changes</button> 
    </div> 

</div> 

Answer 1

因爲你的6/12（或1/2 1/4）3/12，即給你1/8，或1.5/12，Bootstrap不會讓你這樣做。列必須是整數。

唯一的解決辦法是在4/12和8/12而不是你最初的3/12和9/12上增加其他列的空間。

我想你可以重新發明輪子並創建自己的1.5/12列和10.5/12列，但我懷疑它是否值得。這是我最初的建議是如何工作的：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-6"> 
 

 
    <div class="row"> 
 
     <div class="form-group mb"> 
 
      <label class="col-md-4 col-sm-2 control-label input-sm">Claim Ref</label> 
 
      <div class="col-md-8 col-sm-10"> 
 
       <input type="text" class="form-control" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="form-group mb"> 
 
      <label class="col-md-4 col-sm-2 control-label input-sm">File Note Date</label> 
 
      <div class="col-md-8 col-sm-10"> 
 
       <input type="text" class="form-control" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="col-md-6"> 
 

 
    <div class="row"> 
 
     <div class="form-group mb"> 
 
      <label class="col-md-4 col-sm-2 control-label input-sm">Created By</label> 
 
      <div class="col-md-8 col-sm-10"> 
 
       <input type="text" class="form-control" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="form-group mb"> 
 
      <label class="col-md-4 col-sm-2 control-label input-sm">Created Date</label> 
 
      <div class="col-md-8 col-sm-10"> 
 
       <input type="text" class="form-control" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="col-md-12"> 
 

 
    <div class="row"> 
 
     <div class="form-group mb"> 
 
      <label class="col-sm-2 control-label input-sm">Short Description</label> 
 
      <div class="col-sm-10"> 
 
       <input type="text" class="form-control" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="form-group mb"> 
 
      <label class="col-sm-2 control-label input-sm">Detail</label> 
 
      <div class="col-sm-10"> 
 
       <textarea class="form-control"></textarea> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <br /> 
 
    <div class="footer text-right"> 
 
     <button type="button" class="mb-sm btn btn-default">Discard Changes</button> 
 
     <button type="submit" class="mb-sm btn btn-primary">Save Changes</button> 
 
    </div> 
 

 
</div>

Answer 2

我真的不認爲這是可以使用預定義的自舉類的任意組合來實現。但是，如果你願意加入自己的CSS覆蓋的寬度，這是比較容易解決的：

@media screen and (min-width: 768px) { /* Bootstrap .md breakpoint */ 
 
    label.col-sm-2 { 
 
    width: 12.5%; 
 
    } 
 
    label.col-sm-2+div.col-sm-10 { 
 
    width: 87.5%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-md-6"> 
 

 
    <div class="row"> 
 
    <div class="form-group mb"> 
 
     <label class="col-sm-3 control-label input-sm">Claim Ref</label> 
 
     <div class="col-sm-9"> 
 
     <input type="text" class="form-control" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="form-group mb"> 
 
     <label class="col-sm-3 control-label input-sm">File Note Date</label> 
 
     <div class="col-sm-9"> 
 
     <input type="text" class="form-control" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="col-md-6"> 
 

 
    <div class="row"> 
 
    <div class="form-group mb"> 
 
     <label class="col-sm-3 control-label input-sm">Created By</label> 
 
     <div class="col-sm-9"> 
 
     <input type="text" class="form-control" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="form-group mb"> 
 
     <label class="col-sm-3 control-label input-sm">Created Date</label> 
 
     <div class="col-sm-9"> 
 
     <input type="text" class="form-control" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<div class="col-md-12"> 
 

 
    <div class="row"> 
 
    <div class="form-group mb"> 
 
     <label class="col-sm-2 control-label input-sm">Short Description</label> 
 
     <div class="col-sm-10"> 
 
     <input type="text" class="form-control" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="form-group mb"> 
 
     <label class="col-sm-2 control-label input-sm">Detail</label> 
 
     <div class="col-sm-10"> 
 
     <textarea class="form-control"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <br /> 
 
    <div class="footer text-right"> 
 
    <button type="button" class="mb-sm btn btn-default">Discard Changes</button> 
 
    <button type="submit" class="mb-sm btn btn-primary">Save Changes</button> 
 
    </div> 
 

 
</div>

點擊「整版」運行，看看它的效果了。

注爲了使用的adjacent sibling combinator (+)只針對col-sm-10列緊跟在標籤。這將防止該規則應用於<div>之前沒有標籤的元素。

還要注意媒體查詢，以保持列的寬度在較小的寬度上正確佔據整個寬度100%。

您可能需要調整基於你的額外代碼的類選擇，但記得要經常給他們更多的specificity比引導選擇定義的寬度。

希望這會有所幫助！ :)