引導網格和列偏移

Question

我有以下html：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm-5"> .col-sm-5 </div> <div class="col-sm-5 col-sm-offset-2"> .col-sm-5 .col-sm-offset-2 </div> </div> </div> 

結果如下：

根據Bootstrap文檔，它應該完全適合該行。 但是很明顯這里有些錯誤，我無法弄清楚。

當我考慮11列時，它適合（注意最后一個DIV上的col-sm-4而不是col-sm-5）：

<div class="container">
    <div class="row">
        <div class="col-sm-5">
            .col-sm-5
        </div>
        <div class="col-sm-4 col-sm-offset-2">
           .col-sm-5 .col-sm-offset-2
        </div>
   </div>
</div>

我在第一個html中做錯了什么？

Answer 1

全屏對我來說效果很好，也許用xs代替將對您有幫助！ 我的寬度分辨率為1366 。 單擊以下代碼段中的整頁對我來說很好。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-sm-5"> .col-sm-5 </div> <div class="col-sm-offset-2 col-sm-5"> .col-sm-5 .col-sm-offset-2 </div> </div> </div> 

由於這完全取決於屏幕尺寸 ，因此我堅信您的屏幕尺寸不適合sm ，因此使用xs可以正確顯示它。

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-5"> .col-xs-5 </div> <div class="col-xs-offset-2 col-xs-5"> .col-xs-5 .col-xs-offset-2 </div> </div> </div> 

另外，我注意到您正在使用border 。 因此，請確保您輸入以下內容：

* {box-sizing: border-box;}

Answer 2

我們正在使用bootstrap-sass並且bootstrap文件的導入順序不一致。 一旦訂單正確，問題就解決了。