為什么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>