为什么2个.col div彼此堆叠，以及如何在boostrap的相对侧重复此重复？

Question

 .box1,.box2,.box3,.box4,.box5,.box6, .box7 { border: 1px red solid; } .box1 { padding: 140px 10px 0 10px; background: #000 url("../img/...") center center; background-size: cover; color: #fff; border-radius: 0; height: 250px; } .box2 { padding: 71.6px 10px 0 10px; background: #000 url("../img/...") center center; background-size: cover; color: #fff; border-radius: 0; margin-bottom: 5px; } .box3 { padding: 71.6px 10px 0 10px; background: #000 url("../img/...") top center; background-size: cover; color: #000; border-radius: 0; margin-top: 5px; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-sm-6"> <div class="col-sm-12 box1"> <h3>Here is Heading for Box1</h3> </div> </div> <div class="col-sm-6"> <div class="col-sm-12 box2"> <h3>Here is Heading for Box2</h3> </div> </div> <div class="col-sm-6"> <div class="col-sm-12 box3"> <h3>Here is Heading for Box3</h3> </div> </div> </div> <div class="row"> <div class="col-sm-4"> <div class="col-sm-12 box4"> <h3>here is the heading</h3> </div> </div> <div class="col-sm-4"> <div class="col-sm-12 box5"> <h3>here is the heading</h3> </div> </div> <div class="col-sm-4"> <div class="col-sm-12 box6"> <h3>here is the heading</h3> </div> </div> <div class="col-sm-4"> <div class="col-sm-12 box7"> <h3>here is the heading</h3> </div> </div> </div> 

这是布局的“愿望图片”的链接： http : //i.imgur.com/1pEMddV.jpg

如您在附图中所见，我正在Bootstrap中创建一个包含2行的布局。

我已经能够创建第一行-但我无法使第二行布局正常工作。 我正在努力使.box4和.box5彼此重叠，而两者都在.box6左侧。

尽管现在我不知道如何操作（如从所附代码中看到的那样），但我已经能够使上面的行起作用（在.box3之上具有.box2）。 在过去的几天里，我一直在尝试剖析代码，而我对于第一行的工作方式和第二行的工作方式确实很挣扎。

任何帮助深表感谢。

****请注意****
-除了.col类之外，还提供了.boxNumber类，以用于进一步的样式设计。
-由于框（列）之间的间隔/出于样式目的，.col类中存在.col类。
-为了可视化目的，我在每个框上都添加了边框

请在宽度大于768像素的屏幕上预览嵌入式conde。

如果有人可以告诉我第一行的工作方式，我也许可以找出第二行。

Answer 1

这可能对您有帮助。 引导网格 。

 .box1 { background: red; } .box2 { background: lightblue; } .box3 { background: yellow; } .box4 { background: teal; } .box5 { background: black; } .box6 { background: blue; } .box7 { background: grey; } p { font-size: 20px; text-align: center; color: white; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="col-sm-6 box1"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </div> <div class="row"> <div class="col-sm-6"> <div class="col-lg-12 box2"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </div> <div class="col-lg-12 box3"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </div> </div> </div> </div> <hr> <div class="container-fluid"> <div class="row"> <div class="col-sm-4"> <div class="col-md-12 box4"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </div> <div class="col-md-12 box5"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </div> </div> <div class="col-sm-4"> <div class="col-lg-12 box6"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </div> </div> <div class="col-sm-4"> <div class="col-lg-12 box6"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> </div> </div> </div> </div>