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. 

なぜ私はCOLを中央や応答性を保持することができないのですかまたは多分上の任意の他のアイデアを？

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

ブートストラップのグリッドは12列に基づいています。 12/5 = 2.4、ブートストラップは実際にはこのような列幅を持っていません:)

オプション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 - 第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-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>

注 - すべてのスニペットは、フルスクリーンで表示されなければなりません。