我正在使用Bootstrap創建一個圖像滑塊，並且存在一個我無法解決的問題。如何將Bootstrap列居中時爲奇數？

在這個滑塊的每個實例下，我將有3列縮略圖（每行4個）。但是，某些滑塊不會有4個縮略圖，有些會有1,2或3個。在這些情況下，我希望將縮略圖水平居中，同時保持相同的15像素排水槽，如果其中有4個。

現在，當只有2個縮略圖時，這很容易，因爲我可以簡單地在縮略圖集之前和之後添加一個空的3列div。當只有1個縮略圖時，我可以刪除float並使用margin:0 auto;居中，但我無法弄清楚有3個縮略圖時該怎麼做。

任何人都可以告訴我什麼是最好的方法來完成這個？我認爲能夠設置半列是很好的，所以我可以在縮略圖之前和之後放置一個空的1.5列div。這是可行的嗎？

下面是3個縮略版本的示例代碼：

<div id="container"> 

    <div class="row"> 

    <!-- Full Size Image --> 
    <div class="col-sm-12"> 
     <img src="http://placehold.it/960x300" /> 
    </div> 

    <!-- Slider Thumbnails --> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150" /> 
    </div> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150" /> 
    </div> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150" /> 
    </div> 

    </div> 

</div>

而且我已經成立了一個Bootply，顯示我是如何解決的1個縮略圖2縮略圖版本：

Bootply

來源

2015-02-23 user13286

作爲說明，你的2個例子不需要兩個空的'col-sm-3'類。刪除這些2並將第一個'col-sm-3'類更改爲'col-sm-3 col-sm-offset-3'。在你的第一個例子中，將'single col-sm-3'改爲'col-sm-12 text-center' – 2015-02-23 21:06:37

感謝提示@TimLewis！這絕對是完成1和2縮略圖中心的更清晰的方式。 – user13286 2015-02-23 21:14:24

.row.text-center > div { 
    display: inline-block; 
    float: none; 
} 

<div class="row text-center"> 
    <!-- Slider Thumbnails --> 
    <div class="col-sm-3"> 
     <img src="http://placehold.it/200x150"> 
    </div> 
    ... 
</div>

Demo

來源

2015-02-23 21:08:34 isherwood

在我的情況下，div有col-xs-11。所以，添加了下面的CSS來使它完美地處於小屏幕的中心位置。注意：設置float和margin很重要。

padding-left:0; 
    padding-right:0; 
    float:none; 
    margin:auto

來源

2015-11-27 09:18:00 myDoggyWritesCode

引導4：中心奇數列

我才知道，原來問題是引導3.x的時間表，但現在4.x的可用中心列的奇數比較容易。這裏有5個相等的，全寬度的列使用一個例子（沒有額外的CSS）新auto-layout grid ..

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col">1</div> 
     <div class="col">2</div> 
     <div class="col">3</div> 
     <div class="col">4</div> 
     <div class="col">5</div> 
    </div> 
</div>

http://www.codeply.com/go/MJTglTsq9h

此解決方案，因爲引導4現在是Flexbox的，而且也適用於跨越視口的any number of odd columns。

來源

2017-03-01 12:59:48 ZimSystem

如何將Bootstrap列居中時爲奇數？

Bootply

回答

相關問題