我正在使用Bootstrap創建一個網頁，並且正在使用列。我的頁面看起來像這樣：引導中心全行中的所有列
我想中心的最後一列（第二行），但頁面是動態的，我不知道有多少集裝箱有。
我發現谷歌這兩個解決方案：
1）本添加到我的CSS：
.col-centered{
float: none;
margin: 0 auto;
}
2）本類添加標籤屬性
col-lg-offset-4
但兩種解決方案都是這樣的：
這不是我想要的。我希望它看起來像這樣：
我怎樣才能做到這一點？
默認情況下，引導程序的列使用css float屬性浮動。用float我們不能中間對齊列。不過display: inline-block我們可以。我們需要的是從款式列刪除float，並將它們與vertical-align: middle改變inline-block，你會得到你想要的。但不要忘記刪除inline-block附帶的額外空間。
這裏是訣竅。
.wrapper {
background: green;
padding: 20px 0;
}
.box {
border-radius: 10px;
margin-bottom: 30px;
background: #fff;
padding: 10px;
color: #000;
}
.center-align {
letter-spacing: -4px;
text-align: center;
font-size: 0;
}
.center-align [class*='col-'] {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
float: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>注意：設置字體大小：0;字母間距：-4px父母和應用父母的font-size：14px;字母間距：0回到子元素將刪除內嵌塊附帶的空白區域。
您需要將最後一塊文本添加到不同的行並將「col-md-4」更改爲「col-md-12」。
<div class="row">
<div class="col-md-4"> // column 1
bla bla bla
</div>
<div class="col-md-4"> //column 2
bla bla bla
</div>
<div class="col-md-4"> // column 3
bla bla bla
</div>
</div>
<div class="row">
<center>
<div class="col-md-12"> //last column, also note I changed it to 12
bla bla bla
</div>
</center>
</div>
引導具有內置的功能來實現你之後的佈局，而不會引入額外的CSS規則。只需使用.col-md-offset-*類：
使用
.col-md-offset-*類將列向右移。這些類通過*列增加列的左邊距。例如，.col-md-offset-4移動.col-md-4超過四列。
您的佈局最終將尋找與此類似：
.show-grid {
margin-bottom: 15px;
}
.your-custom-div {
height: 50px;
background-color: green;
color: white;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="col-md-4">
<div class="your-custom-div">
.col-md-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
<div class="row show-grid">
<div class="col-md-4 col-md-offset-4">
<div class="your-custom-div">
.col-md-4 .col-md-offset-4
</div>
</div>
<div class="clearfix visible-md"></div>
</div>
</div>
</body>
</html>編輯＃1：對於你不知道有多少列，你會從你的數據庫中提取用於要求第二行，另一個選項是在HTML輸出期間使用條件，如果集合中項目數的模數除以列數等於1，則還輸出.col-md-offset-4類，或者proce否則照常編輯。在使用Razor的ASP.NET中，這看起來是這樣的（下面的例子保持簡單，目的是爲了演示所提出的邏輯，它可以被重構爲它自己的HTML助手類，同時也考慮了其他列大小）：
@{
bool lastItemShouldBeCentered = Foo.Count % 3 == 1;
for (int i = 0; i < Foo.Count; i++)
{
bool isLastItem = i == Foo.Count - 1;
if (isLastItem && lastItemShouldBeCentered)
{
<div class="col-md-4 col-md-offset-4">
// Foo[i] content here
</div>
}
else
{
<div class="col-md-4">
// Foo[i] content here
</div>
}
}
}
編輯＃2：看起來我誤解了你的要求。對於1個剩餘色譜柱，此解決方案就足夠了。爲了更多，我會與@穆罕默德的回答。
請提供一個jsFiddle –
偏移解決方案似乎工作.. http://codeply.com/go/PBfCft4vEt – ZimSystem
@Skelly是的，它的工作原理，如果我知道有正好四個容器，因爲我可以手動設置偏移量第四個容器。對我來說，這是行不通的，因爲我的網站是動態生成的，我不知道有多少個容器。 – Aaronmacaron