Bootstrap：兩列居中

我想用Bootstrap 3.1創建一個兩列居中的佈局。我讀過這個：How do I center a Bootstrap div with a 'spanX' class?，但內容是stil排列在左邊。這是我的HTML：Bootstrap：兩列居中

<div class="row"> 
<div class="center"> 

    <div class="col-lg-3 gauche"> 
    Left div 
    </div> 

    <div class="col-lg-5 corps"> 
    Right div 
    </div> 

</div> 
</div>

我的CSS：

body 
{ 
    padding: 0; 
    margin: 0; 
} 
.corps 
{ 
    background-color: white; 
} 
.contenu 
{ 
    margin-top: 5em; 
    margin-bottom: 1em; 
    background-color: white; 
    padding: 1.2em; 
    padding-left: 1.5em; 
} 
.center 
{ 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
} 
.gauche 
{ 
    background-color: #e6e6e6; 
    min-height: 200px; 
}

結果是在這裏：http://i.imgur.com/5nhZ2WS.png

來源

2014-02-09 user2820

添加一個容器，去掉中間的div並添加兩邊空白的col-lg-2，因此它可以疊加12列：

<div class="container"> 
<div class="row"> 
    <div class="col-lg-2"> 
    </div> 
    <div class="col-lg-3 gauche"> 
    Left div 
    </div> 

    <div class="col-lg-5 corps"> 
    Right div 
    </div> 
    <div class="col-lg-2"> 
    </div> 
</div> 
</div>

來源

2014-02-10 03:27:11 moodyjive

謝謝，這工作！ – user2820

您的歡迎。如果它有幫助，請批准答案。 – moodyjive

應該使用col-lg-offset-2而不是 – swiss196

-1

嘗試

.row { 
    margin:0px auto; 
}

來源

2014-02-09 23:36:20 Kody

它似乎沒有改變任何東西。 – user2820

不起作用 - 只是試了一下。 – Radmation

你會想要使用列偏移類。如果您正在使用Bootstrap的庫存版本，則所有列類別需要添加多達12個。您的col-lg-3和col-lg-5僅加起來爲8，因此，添加col-lg-offset-2應該使您處於中心位置。此外，bootstrap有一個內置的集中類container我個人會使用它。見下面的代碼：

<div class="container"> 
<div class="row"> 

    <div class="col-lg-3 col-lg-offset-2 gauche"> 
    Left div 
    </div> 

    <div class="col-lg-5 corps"> 
    Right div 
    </div> 

</div> 
</div>

來源

2014-02-10 03:28:27 theRyanMark

爲什麼您刪除答案批准？ – theRyanMark

儘管添加2個空白的cols會「起作用」，但偏移類更加正確一些。 – JayD

謝謝@JayD我也這麼認爲。經批准的答案沒有什麼「錯誤」，只是我的答案更爲正確。 – theRyanMark

Bootstrap：兩列居中

回答

相關問題