Side Divide？

Question

我想將Div 1,2和3保留在Bootstrap的左側（或沒有引導程序），但是當我向div1或高度添加文本時，div3會進入右側（我想將div3保留在左側） 。

這是一個bootply example.

文本3（DIV3）應在左側。

我也加了float:left;給div，但沒有奏效。

我該如何解決這個問題？

HTML

<div class="container">  
    <div class="col-md-6"> 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
    </div>  
    <div class="col-md-6"> 
     Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
     Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
     Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
    </div>  
    <div class="col-md-6"> 
     Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
     Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
     Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
    </div> 
</div> 

CSS

.container{ 
    border:1px solid #ff0000; 
} 
.col-md-6{ 
    float:left; 
} 

Answer 1

只需用引導的.row類似如下：

Bootply - DEMO

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     </div> 
     <div class="col-md-6"> 
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-6"> 
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
     </div> 
    </div> 
</div> 

Answer 2

要麼添加CSS規則clear:both到最後一個div或者改變你的同事*類，以適應引導電網系統內

Answer 3

（更改md到任何尺寸）：

<div class="clearfix visible-md-block"></div> 

刪除visible-md-block如果你想在每一個尺寸突破。 （如果這就是你想要做的，那麼也許你應該創建一個新的行。）

也不要忘記將.row添加到您的容器。

演示：http://jsfiddle.net/DerekL/v2371qza/3/embedded/result/

從the documentation報價：

<div class="row"> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
    <div class="clearfix visible-xs-block"></div> 
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
</div> 

Answer 4

使用引導程序可以添加.clear類最後.col-md-6或者你可以前的最後.col-md-6

<div class="clear"></div> 

Answer 5

添加一個div html：

<div class="container"> 

     <div class="col-md-6"> 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
      Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     </div> 

     <div class="col-md-6"> 
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
      Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
     </div> 


     <div class="col-md-6" id ="left"> 
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
      Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
     </div> 
</div> 

CSS：

.container{ 
    border:1px solid #ff0000; 
} 
#left { 
    clear:left; 
} 

清除有出現在左邊的div的左側。

Answer 6

我認爲這就是你在哪裏尋找我給你的HTML標記-&該CSS。如果您還有其他問題，請隨時提問。

/*YOUR CSS MARK UP*/ 
#left-container{ 
width:400px;/*this width can be whatever you want*/ 
position:absolute; 
top:0; 
left:0; 
} 
#one{ 
width:200px; 
height:300px; 
background-color:#0CF; 
} 
#two{ 
width:200px; 
height:300px; 
background-color:#C69; 
} 
#three{ 
width:200px; 
height:300px; 
background-color:#C96; 
} 
<!--Your HTML MARK UP BELOW--> 
<html> 
<head> 
</head> 
<body> 
<div id="left-container"> 
<div id="one">This is some text. This is some text. This is some text. This is some text. This is   some text. This is some text. This is some text.</div> 
<div id="two">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> 
<div id="three">This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> 
</div> 
</body> 
</html> 

Answer 7

，如果你不希望使用引導程序，這裏是小提琴如何實現目標 Without Bootstrap。嘗試使用Display:inline-block而不是float，你可以忽略的div我有利用之間margin中的jsfiddle例如

查詢最歡迎

Answer 8

可以COL-SM-12

<div class="col-sm-12"> 
    <div class="col-sm-6"> 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
     Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 .Text 1 . 
    </div> 
    <div class="col-sm-6"> 
     Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
     Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
     Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 .Text 2 . 
    </div> 
</div> 
<div class="col-sm-12"> 
    <div class="col-sm-6"> 
     Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
     Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
     Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 .Text 3 . 
    </div> 
</div>