Center 7 col-xs in a row

-1

我有7個col-xs（12-7 = 5），我不能居中。Center 7 col-xs in a row

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

didin't工作

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

工作，但我不能使用裕度只有一個COL-XS;/

來源

2017-03-16 FamousPL

你能告訴你的HTML嗎？至少在col佈局 – DavidG

在[bootstrap]（http://getbootstrap.com/customize/）上，您可以設置網格系統的列數。如果12對你不好，請設置另一個值，如13，所以13-7 = 6 ... –

7等於中心列是硬使用標準引導自7不是12的偶數因子。唯一的方法是使用嵌套，偏移或自定義CSS。如果您想避免定製網格（使用LESS或SASS定製）。

這裏有一些選擇...

7居中同事{X} -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

來源

2017-03-16 23:36:52 ZimSystem

您可以使用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; 
}

來源

2017-03-17 09:57:03 Abinthaha

Center 7 col-xs in a row

回答

相關問題