Bootstrap與嵌套有點問題

Question

我在Bootstrap嵌套中遇到了一些問題。

我試圖做一個像格像這樣： 我當前的代碼：

<div class="row"> 

<div class="col-md-4"><div style="background-color: red;">1</div></div> 
<div class="col-md-4">        
<div class="row"> 

<div class="col-md-2"><div style="background-color:green;">2</div></div> 
<div class="col-md-2"><div style="background-color:blue;">3</div></div>   
</div>  

<div class="row"> 
<div class="col-md-4"><div style="background-color: grey;">5</div></div> 
</div>  
</div> 

<div class="col-md-3"><div style="background-color: purple;">4</div></div> 

</div> 

但什麼我目前得到的是：

有沒有人有任何想法我做錯了什麼？

Answer 1

您的案例中的嵌套似乎是錯誤的。你應該把30％的空間視爲一個新的行。它應該是col-md-6兩個2和3。我猜你需要使用container-fluid對於這種佈局，並嘗試一下這種方法：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div style="background-color: red;">1</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <div style="background-color:green;">2</div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div style="background-color:blue;">3</div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div style="background-color: grey;">5</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div style="background-color: purple;">4</div> 
 
    </div> 
 
    </div> 
 
</div>

注：我有將所有班級更改爲xs-*以方便預覽。您可以在您的應用程序中將其更改爲md-*。

此外，對於得到一個masonry風格輸出，你可能需要添加一些額外的課程告訴它應該採取兩種元素高度等

.row {margin-bottom: 25px;} 
 
.height-2x {line-height: 1.75;} 
 
.height-2x > div {padding-bottom: 40px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 height-2x"> 
 
     <div style="background-color: red;">1</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <div style="background-color:green;">2</div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div style="background-color:blue;">3</div> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div style="background-color: grey;">5</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3 height-2x"> 
 
     <div style="background-color: purple;">4</div> 
 
    </div> 
 
    </div> 
 
</div>

預覽

Answer 2

我認爲這會對你有所幫助。

div { 
 
    text-align: center; 
 
    font-size: 40px; 
 
    color: #fff; 
 
} 
 

 
.col-xs-6 { 
 
    height: 100px; 
 
} 
 

 
.row { 
 
    height: 100px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.col-xs-4 { 
 
    height: 180px; 
 
} 
 

 
.div1, 
 
.div4 { 
 
    background: green; 
 
} 
 

 
.div2 > div, 
 
.div3 > div, 
 
.div5 > div { 
 
    background: red; 
 
    height: 100%; 
 
} 
 

 
.div5 > div { 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="col-xs-4 div1">1</div> 
 
    <div class="col-xs-4"> 
 
    <div class="row"> 
 
     <div class="col-xs-6 div2"> 
 
     <div>2</div> 
 
     </div> 
 
     <div class="col-xs-6 div3"> 
 
     <div>3</div> 
 
     </div> 
 

 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12 div5"> 
 
     <div>5</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-xs-4 div4">4</div> 
 
</div>