無法在引導程序中居中多個col 3

我試圖將使用引導程序創建的行內的7個內聯列居中。我嘗試了所有我能找到的解決方案（絕對定位除外，我不想）。我最初的計劃是在col-md-1 div的列表中添加一個額外的容器div，但是當我這樣做時，div將自己設置爲適合行的100％，而不是僅佔所有行的100％ COLS。我的代碼如下：無法在引導程序中居中多個col 3

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12" style="background-color: pink;"> 
      <div class="row"> 
       <div class="col-md-1"> 
        Hello 
       </div> 
       <div class="col-md-1"> 
        Hello 
       </div> 
       <div class="col-md-1"> 
        Hello 
       </div> 
       <div class="col-md-1"> 
        Hello 
       </div> 
       <div class="col-md-1"> 
        Hello 
       </div> 
       <div class="col-md-1"> 
        Hello 
       </div> 
       <div class="col-md-1"> 
        Hello 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.container .row .col-md-12 .row { 
    text-align: center; 
} 
.col-md-1 { 
    width: 125px; 
    height: 80px; 
    margin-right: 7px; 
    background-color: #E6E6E6; 
    display: inline-block; 
} 
.col-md-1:last-child { 
    margin-right: 0; 
}

而且，這裏是一個bootply：

http://www.bootply.com/116478

來源

2014-02-24 Jack Sniper

我真的不想闖入bootstrap.css文件，但我不反對在我的單獨樣式表中更改col-md-1，所以我就這樣做了。我之前嘗試過這一切都沒有成功，但我一定有空：無;附加到不同的類，因爲這次它完美地工作！謝謝您的幫助！ –

這是因爲默認風格將float: left;添加到列，可以在以下片段中看到：

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
    float: left; 
} 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
    min-height: 1px; 
    padding-left: 15px; 
    padding-right: 15px; 
    position: relative; 
}

從我的角度來看，將一個列居中的最佳方法是使用offset。這會阻止你引起Bootstrap網格的意外行爲。

來源

2014-02-24 23:41:27

你需要什麼樣的瀏覽器支持？如果生活中可以沒有IE9-很容易實現Flexbox做到：

http://www.bootply.com/116480

.container .row .col-md-12 .row { 
    display: flex; 
    justify-content: center; 
}

當然，實際情況並非如此簡單。您需要Safari的-webkit-前綴，IE10的不同語法（IE11使用現代語法）以及舊版Firefox（帶-moz-前綴）和Safari/Chrome（-webkit）的語法。只需根據您需要走多遠選擇並選擇。

來源

2014-02-24 23:48:50

無法在引導程序中居中多個col 3

回答

相關問題