使用引導程序，您如何正確清除列？

http://darrenbachan.com/playground/syau/index.html#!/使用引導程序，您如何正確清除列？

我知道你們希望代碼在這裏幫助解決問題，但我使用引導程序，所以這是他們的代碼。如果你看看名冊部分的高度都搞砸了。我有兩個解決方案，一個是進入，特別是在某些div上放置一個明確的類：另一個解決方案是將固定高度應用到列上。我想要一些動態的。

現在某些名單成員沒有正確放置，它應該是一個4上欄網格。

另外，爲了避免創建兩個帖子。我有第二個問題。我無法弄清楚如何在我的視頻中放置背景圖片。我的CSS是：

.full-img { 
     background: url('../img/fallback.jpg'); 
     background-size: cover; 
    }

我有垂直居中.banner文本DIV的另一個問題，我的代碼是：

.banner-text { 
    position: relative; 
    z-index: 200; 
    text-align: left; 
    display: table; 
    padding-top: 60px; 
    padding-bottom: 60px; 
    float: left; 
} 
.banner-text h1 { 
    display: table-cell; 
    vertical-align: middle; 
}

但沒有工作，這就是爲什麼我有在div上填充以僞造它。

我對這個整個前端的東西有點新鮮，所以如果你們接受任何東西，我會接受任何其他建議。

來源

2016-05-09 Darren Bachan

引導有一個名爲clearfix一個輔助類，你應該放在一個空div每4列之後在md模式下，在sm模式下每3列之後，在xs模式下每2列之後。你這樣做的方法是使用visible-lg-block,visible-md-block,visible-sm-block和visible-xs-block類，因此它們只在適當的尺寸下有效。

下面是一個例子：

<div class="col-xs-6 col-sm-4 col-md-3"></div> 
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block"></div> 
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-sm-block"></div> 
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div> 
<div class="col-xs-6 col-sm-4 col-md-3"></div> 
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-sm-block"></div> 
<div class="col-xs-6 col-sm-4 col-md-3"></div> 
<div class="col-xs-6 col-sm-4 col-md-3"></div><div class="clearfix visible-xs-block visible-md-block visible-lg-block"></div>

記下visible-*-block類，因爲公倍數的重疊。

橫幅文本

它看起來你是在正確的軌道上的垂直對齊方式，你就必須給.banner-text 100％的高度，你需要爲.row做同樣的.container包裝它。

所以基本上，

.banner-text { 
    position: relative; 
    z-index: 200; 
    text-align: left; 
    display: table; 
    padding-top: 60px; 
    padding-bottom: 60px; 
    float: left; 
    height:100% 
} 
.banner-text h1 { 
    display: table-cell; 
    vertical-align: middle; 
}

然後給它一個height:100%上面行和容器。你可以給他們的ID，所以你可以在css中定位它們，或者直接使用它。

來源

2016-05-09 22:52:47

我試着添加可見的* - 塊的div，但它仍然沒有做任何事。我也提出了你提到的高度的元素：100％，但似乎我失去了我在這個過程中的按鈕。我已將代碼在線推送，以便您可以看到。 –

我已經看到sm-block和visible-xs-block工作，但是md-block沒有出於某種原因。 –

@DarrenBachan啊，你還應該在所有具有'visible-md-block'的div上添加一個'visible-lg-block'。那麼它應該工作。此外，你沒有包含那些具有'visible-sm-block'，那些在每4列之後。我更新了我的答案以反映這一點。 –

有關背景圖像

background: url("../img/image.jpg") no-repeat center center fixed; 
-moz-background-size: cover; 
-webkit-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

爲h1您可以設置width & height它並使用margin:auto;

來源

2016-05-09 22:44:51

Bootstrap的行類爲你做這件事。您可以限制每行元素的數量，也可以顯式設置每個元素的高度並且不使用行。後一種方法將允許您根據視口大小改變項目的數量。

對於精細的網格，可能需要使用nth-child或者甚至添加自己的數字類來顯式清除浮點數。

來源

2016-05-09 22:52:47

我試過這個 /*＃roster-list div：nth-child（4）:: after { \t content：「」; display：table; 明確：均; } –

使用引導程序，您如何正確清除列？

回答

相關問題