如何使用Twitter Bootstrap 3將兩列布局居中？

我正在使用twitter引導3爲一個網站，並有一個主要的內容區和側邊欄。目前，兩列並排左對齊，但我希望它們能夠集中放置在頁面上。如何使用Twitter Bootstrap 3將兩列布局居中？

我看到的那麼，一列是使用CSS對準了一些解決方案：

.col-centered { 
    float: none; 
    margin: 0 auto; 
}

這工作，但只爲我的一列。我嘗試將我的兩列嵌套在一個大小爲12的列中，並嘗試將其集中，但無濟於事。

我不希望刪除浮動，以便在小尺寸的列將堆疊，但在所有其他大小，他們將保持並排。

這裏是我使用的HTML的基本結構：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-8 col-md-7 col-lg-6"> 
     </div> 
     <aside class="col-xs-12 col-sm-4 col-md-5 col-lg-6"> 
     </aside> 
    </div> 
</div>

由於提前，

導航

來源

2013-11-21 navanitachora

http://www.bootply.com/95883使用'.row'並讓每列跨越網格的一半或'6'應該這樣做。 – Trevor

@Trevor謝謝我想我明白髮生了什麼我認爲我可能需要重寫容器的填充左側和填充右側來完成我想要的操作。 – navanitachora

通過重寫的填充左和padding-正確解決了這個問題bootstrap中的.container類。

.container { 
    padding-right: 120px; 
    padding-left: 120px; 
}

它可能是bette r以百分比的方式進行上述調整，以便擴大規模。由於側欄沒有完全延伸到容器的末端，結果雖然沒有居中，但我被拋棄了。

添加上面的覆蓋爲我做了。

非常感謝@trevor的測試牀。

來源

2013-11-21 23:32:42 navanitachora

如何使用Twitter Bootstrap 3將兩列布局居中？

回答

相關問題