センター7列xs

Question

私は7 col-xs（12-7 = 5）と私はこれを中心にすることはできません。

.col-centered{ 
float: none; 
margin: 0 auto; 
} 

は

.col-centered { 
    display:inline-block; 
    float:none; 
    text-align:left; 
    margin-right:-4px; 
    } 

作業を作業didin'tが、私は、唯一のCOL-XSのためのマージンを使用することができない;/

Answer 1

7等しい中心列硬いので、標準的なブートストラップを使用しています7は12の偶数倍ではありません。唯一の方法はネスト、オフセットまたはカスタムCSSを使用することです。カスタムグリッドを避けたい場合（LESSまたはSASSでカスタマイズ）ここで

は、いくつかのオプションがあります...

7は、{X} col-を中心に-1オフセットネスティング&を使用して：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-12"> 
     <div class="row"> 
      <div class="col-sm-1 col-sm-offset-3">.</div> 
      <div class="col-sm-1">.</div> 
      <div class="col-sm-1">.</div> 
      <div class="col-sm-1">.</div> 
      <div class="col-sm-1">.</div> 
      <div class="col-sm-1">.</div> 
      <div class="col-sm-1">.</div> 
     </div> 
     </div> 
    </div> 
</div> 

Demo & other examples for Bootstrap 3

そして、あなたの考えるブートストラップ4場合フレックスボックスベースのグリッドのおかげで、奇数の列がより簡単になりました。 5,7 or 9, etc.. columns with Bootstrap 4

Answer 2

flexboxを使用して達成することができます。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-1 col-sm-offset-3">.</div> 
     <div class="col-sm-1">.</div> 
     <div class="col-sm-1">.</div> 
     <div class="col-sm-1">.</div> 
     <div class="col-sm-1">.</div> 
     <div class="col-sm-1">.</div> 
     <div class="col-sm-1">.</div> 
    </div> 
</div> 

とスタイル

.row { 
    display: flex; 
    justify-content: center; 
}