Bootstrap：居中col-md-5？

Question

我覺得這是一個非常奇怪的問題，但我似乎無法在網上找到解決方案。

如果我有一個col-md-5，我似乎無法居中。 據我瞭解網格系統，如果我選擇列大小（1-12），爲了控制列的位置，我使用col - ## - offset - ＃。

所以，如果我有一個col-md-4，我會用col-md-offset-4推它從左邊4列，然後它將居中。這個想法是，爲了使一個列居中，在它的左邊和右邊的網格中必須有相同數量的列。

現在，如果我有一個，比如說，col-md-5？我該如何居中呢？ 做一些類似於col-md-4的操作將會在右側留下3個。我嘗試了幾件事，但沒有成功。

在此先感謝。

Answer 1

那麼你可以試試這個

.col-centered { 
display:inline-block; 
float:none; 
} 

這裏是html爲它是

<div class="row"> 
    <div class="col-lg-1 col-centered"></div> 
</div> 

那只是一般的想法，但這裏是一個example我在網上找到。

Answer 2

Twitter引導適用float列col-*-#上的屬性。首先，我們需要通過重新設置float到none來覆蓋特定列。

然後我們可以給列一個automargin-left/right看齊，水平居中 - Example Here。

@media (min-width: 992px) { 
    .col-md-center { 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
    } 
} 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-5 col-md-center"> 
    <!--     ^-- Added class name 
    --> ... 
    </div> 
    </div> 
</div> 

Answer 3

最好的辦法就是讓自己的規則對於這一點，創建一個4.5偏移。

左邊距=（100/12）*（12-5）/ 2 = 29.175％

.col-xs-5 { 
 
    background-color: red; 
 
} 
 
.col-xs-offset-4_5 { 
 
    margin-left: 29.175%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-xs-5 col-xs-offset-4_5">.col-xs-5</div> 
 
    </div> 
 
    </div> 
 
</div>

或者你也可以走這條路，利用6列，但刪除1列，在每邊添加halv列填充。

.col-xs-6.morepadding { 
 
    padding: 0px 4.16%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 col-xs-offset-3 morepadding">.col-xs-6 with half the width of a column as padding on each side</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

嘗試增加text-center類是這樣的：

<div class="row"> 
<div class="col-md-12 text-center"> 
BLABLA 
</div> 
</div> 

該解決方案可與COL-MD-5也

Answer 5

看一看這篇文章，頂部回答： Center a column using Twitter Bootstrap 3

具體 「辦法＃2」，我想是你在找什麼

小提琴：http://jsfiddle.net/85oy836u/1/

<div class="container"> 
<div class="row text-center"> 
    <div class="col-xs-5" style="float: none; margin: 0 auto; background: green;">col-xs-5</div> 
</div> 
    </div> 

Answer 6

<div class="col-md-10 col-md-offset-1"> 
    <div class="col-md-6 col-md-offset-3"> 
    </div> 
</div>