複雜的boostrtrap網格（嵌套）

我想弄清楚如何用bootstrap實現下面的佈局。複雜的boostrtrap網格（嵌套）

這是我的代碼到目前爲止。我沒有找到一個解決方案把塊第一的cols下面...

<body> 
<div class="container"> 
    <div class="row"> 
    <div class="col-sm-6"> 
     <div style="height: 905px; background-color: blue;"></div> 
    </div> 
    <div class="col-sm-6"> 
     <div style="margin-top: 200px; height: 305px; background-color: blue;"></div> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <div style="margin-top: 30px; height: 370px; background-color: blue;"></div> 
      </div> 
      <div class="col-sm-6"> 
       <div style="margin-top: 30px; height: 1000px; background-color: blue;"></div> 
      </div> 
     </div> 
    </div> 

    </div> 
</div> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"> 
</script></body>

所需的佈局是：

來源

2017-05-15 user3847380

UPS我忘了把我的代碼。這裏是。 – user3847380

不能用簡單的bootstrap來完成。你有多個地方不能成爲一行的一部分，你將不得不編寫自定義CSS – TheRealMrCrowley

好的..這就是我猜測..謝謝 – user3847380

在接下來的代碼，你可以看到佈局。你必須知道：風格之前，只是爲了告訴你它是如何看待的。這個例子並沒有讓人思考得到迴應，如果你想讓它在移動設備和桌面設備上工作，你必須編輯它。

另一件事是，第六個盒子是在容器外面，如果屏幕很少，這個盒子看不到完整。

我給所有箱子固定的高度來測試它看到的圖片。

.container { 
 
    max-width: 80%; 
 
} 
 

 
.container .red:before, 
 
.container .red2:before { 
 
    background-color: red; 
 
    content: ""; 
 
    display: block; 
 
    margin-bottom: 15px; 
 
} 
 

 
.container .red:nth-child(1):before { 
 
    height: 200px; 
 
} 
 

 
.container .red:nth-child(2):before { 
 
    margin-top: 30px; 
 
} 
 

 
.container .red2:before, 
 
.container .red:nth-child(2):before, 
 
.container .red:nth-child(5):before, 
 
.container .red:nth-child(7):before { 
 
    height: 80px; 
 
} 
 

 
.container .red:nth-child(3):before { 
 
    height: 75px; 
 
} 
 

 
.container .red:nth-child(4):before { 
 
    height: 265px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
     <div class="col-xs-6 red"></div> 
 
     <div class="col-xs-6 red"></div> 
 
     <div class="col-xs-3 red"></div> 
 
     <div class="col-xs-3 pull-right red"></div> 
 
     <div class="col-xs-8 col-xs-offset-1 red"></div> 
 
     <div class="col-xs-5"> 
 
     <div class="red2" style="margin-left: -20%;"></div> 
 
     </div> 
 
     <div class="col-xs-4 red"></div> 
 
    </div>

來源

2017-05-15 23:36:32

謝謝勒內！我非常感謝你的幫助。 – user3847380

複雜的boostrtrap網格（嵌套）

回答

相關問題