引導網格和列偏移

我有以下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 docs應該完全適合的行。但顯然有一些事情是錯誤的，我無法弄清楚。

當我拿11列考慮它適合（通知COL-SM-4上的最後一個DIV，而不是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？

來源

2016-06-28 Andrew Flierman

對我來說工作正常..請檢查小提琴https://jsfiddle.net/bxd12auh/1/ –

使用'-xs-'類。 –

'-xs-'類沒有什麼區別 –

適合我全屏使用，可替換爲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;}

來源

2016-06-28 10:24:14

嗨Praveen，我的屏幕尺寸是2560px寬，這樣可以容納'sm'不是嗎？ ;-)。替換爲'xs'並沒有爲我做任何事情，讓我更新我的問題，因爲問題可能在HTML –

的其他地方。另外，我沒有使用'容器流體' –

@AndrewFlierman啊！你在這。 ** 1。**嘗試使用CDN，因爲它看起來像'bootstrap.css'被修改了。 ** 2。**如果這不起作用，請嘗試使用「容器流體」。 –

我們使用bootstrap-sass並有一個與引導文件的進口秩序的不一致。一旦訂單正確，問題就消失了。

來源

2016-06-28 12:42:13

引導網格和列偏移

回答

相關問題