在一行中居中col BOOTSTRAP

Question

我在將一列中的行集中在一起時出現問題。這裏是我的html的樣子：

<div class="row"> 
    <div class="col-sm-12 parent-col"> 
    <div class="col-sm-2 child-col">itemOne</div> 
    <div class="col-sm-2 child-col">itemTwo</div> 
    <div class="col-sm-2 child-col">itemThree</div> 
    <div class="col-sm-2 child-col">itemFour</div> 
    <div class="col-sm-2 child-col">itemFive</div> 
    </div> 
</div> 

我已經attemtped：

.parent-col { float: none; margin: 0 auto; } //This did not work 
.child-col { float: none; display: inline-block; } //This works, but I then lose responsiveness. 
.col-sm-offset-1 on parent-col. //This also works. However, it is not EXACTLY centered. One side is about 4px larger than the other. 

任何其他的想法如何或可能是爲什麼我不能山坳居中或保留的反應？

Answer 1

如果你試圖讓父列居中的孩子列，您可以添加偏移到第一子列：

<div class="row"> 
    <div class="col-sm-12"> 
    <div class="row"> 
     <div class="col-sm-offset-1 col-sm-2">itemOne</div> 
     <div class="col-sm-2">itemTwo</div> 
     <div class="col-sm-2">itemThree</div> 
     <div class="col-sm-2">itemFour</div> 
     <div class="col-sm-2">itemFive</div> 
    </div> 
    </div> 
</div> 

把父行的偏移有效地把13列在所以你想讓子列加起來12（1偏移量，總共10列，然後剩餘將是1 = 12）

Answer 2

Bootstrap的網格是基於12列。 12/5 = 2.4，bootstrap並不是真的有這種列寬度:)

選項＃1 - 每邊添加1列（使用col-sm-1）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-12 parent-col"> 
 
    <div class="col-sm-1 child-col"></div> 
 
    <div class="col-sm-2 child-col">itemOne</div> 
 
    <div class="col-sm-2 child-col">itemTwo</div> 
 
    <div class="col-sm-2 child-col">itemThree</div> 
 
    <div class="col-sm-2 child-col">itemFour</div> 
 
    <div class="col-sm-2 child-col">itemFive</div> 
 
    <div class="col-sm-1 child-col"></div> 
 
    </div> 
 
</div>

選項＃2 - 增加第一列偏移：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-12 parent-col"> 
 
    <div class="col-sm-2 child-col col-md-offset-1">itemOne</div> 
 
    <div class="col-sm-2 child-col">itemTwo</div> 
 
    <div class="col-sm-2 child-col">itemThree</div> 
 
    <div class="col-sm-2 child-col">itemFour</div> 
 
    <div class="col-sm-2 child-col">itemFive</div> 
 
    </div> 
 
</div>

選項＃3 - 如果你真的想要和我建議不要它你可以覆蓋網格系統：

@media (min-width: 768px) { 
 
    .grid-of-10 .col-sm-2 { 
 
    width: 20%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-12 parent-col grid-of-10"> 
 
    <div class="col-sm-2 child-col">itemOne</div> 
 
    <div class="col-sm-2 child-col">itemTwo</div> 
 
    <div class="col-sm-2 child-col">itemThree</div> 
 
    <div class="col-sm-2 child-col">itemFour</div> 
 
    <div class="col-sm-2 child-col">itemFive</div> 
 
    </div> 
 
</div>

注 - 所有片段應該在全屏觀看。