引導表格設計間距問題

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的3/12（或1/2的1/4），所以您得到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

我實際上不認為可以通過預定義的Bootstrap類的任何組合來實現。 但是，如果您願意添加自己的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> 

運行后單擊“整頁”以查看其生效。

請注意，使用相鄰的同級組合器（ + ）只是為了定位緊隨標簽之后的col-sm-10列。 這將阻止該規則應用於在其前面沒有標簽的<div>元素。

還要注意媒體查詢，以使列正確地占據較小寬度時的全部100%寬度。

您可能想根據其他代碼來調整類選擇器，但要記住始終要比定義寬度的Bootstrap選擇器賦予它們更多的特異性 。

希望這可以幫助！ :)