div不會一直浮動到頂部

我使用6個面板，3個col-md-4和3個col-md-8的bootstrap3創建了一個頁面。 3 col-md-4應該向左浮動，3 col-md-8應該向右浮動，但它們中的每一個都有條件存在（所以頁面上不總是有6個面板）。div不會一直浮動到頂部

當其中所有6 apearing佈局是這樣的：

[col-md-4(1)][ col-md-8(1) ] 
[col-md-4(2)][ col-md-8(2) ] 
[col-md-4(3)][ col-md-8(3) ]

如果COL-MD-4（1）缺少例如佈局看起來像這樣：

[col-md-4(2)][ col-md-8(1) ] 
[col-md-4(3)][ col-md-8(2) ] 
      [ col-md-8(3) ]

但每次僅限面板上升1「級別」最高處，所以如果COL-MD-4（1）和（2）缺少例如佈局將是這樣的：

   [ col-md-8(1) ] 
[col-md-4(3)][ col-md-8(2) ] 
      [ col-md-8(3) ]

那麼什麼是正確的方式來堆疊這些面板，使他們正常工作？

我看到另一篇文章的答案，給了這個「修復」：

HTML

<div id="container"> 
    <div id="left"> 
     <div id="first"></div> 
     <div id="second"></div> 
    </div> 
    <div id="right"> 
     <div id="third"></div> 
     <div id="fourth"></div> 
    </div> 
</div>

CSS

#left { 
    float: left; 
} 
#right { 
    float: right; 
}

但是當我試圖使用，其結果是：

[col-md-4(1)] 
[col-md-4(2)] 
[col-md-4(3)] 
[ col-md-8(1) ] 
[ col-md-8(2) ] 
[ col-md-8(3) ]

The col-md-8沒有正確地浮動

來源

2016-08-03 Tomás Rezende

看都不看一眼引導官員？並檢查http://getbootstrap.com/css/是一個學習更容易 – KingRider

不，你不應該這樣做，我得到的是你想要你所有的col與價值4是在左邊，所有列的價值8在右邊？
您可以檢查這個環節我剛纔提出：

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div><div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div><div class="row"> 
    <div class="col-md-4"> 
    This is col-md 4 
    </div> 
    <div class="col-md-8"> 
    This is col-md-8 
    </div> 
</div>

CSS

.col-md-4 
{ 

    background-color: lightblue; 
} 
.col-md-8 
{ 
    background-color: pink; 
}

這裏是鏈接
http://codepen.io/Rehman/pen/WxaGbE

來源

2016-08-04 15:04:07

問題是，就像我所說的，面板可能存在也可能不存在，例如有一個面板只在變量$ xyz是不是null，如果你去你的代碼並刪除其中一個col-md-4，例如它旁邊的col-md-8將會出現在左邊，我不想要這個，我想讓它留在右邊 –

@TomásRezende再次檢查我的代碼，如果你知道這個col-md-8的col-md-4丟失了，你可以調用一個* right *的類，它會將列拖到左邊。你的浮動工作不起作用，因爲bootstrap默認已經將它們左右浮動，所以你需要做*重要的事情來覆蓋這個屬性。（這是不鼓勵的，但它現在可能會幫助你） –

div不會一直浮動到頂部

回答

相關問題