复杂的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网格（嵌套）

回答

相关问题