爲什麼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

正如你可以在附加的圖片看，我期待創造與引導2行的佈局。

我已經能夠創建第一行 - 但我不能讓第二行佈局工作。我正努力與.box4和.box5在彼此的頂部，而都在.box6的左側。

雖然現在我不知道如何從附加代碼中看到，我已經能夠使上排工作（在.box3之上有.box2）。 過去幾天我一直在試圖破解代碼，我真的很困擾第一行是如何工作的，第二行是如何工作的。

任何幫助，非常感謝。

****請注意****
- .boxNumber類除了.col類以外，還提供了進一步的樣式。
- .col類中存在.col類，因爲這些方框（列）之間的間距/用於樣式目的。
- 爲了可視化目的，我在每個框中添加了邊框

請在寬度大於768px的屏幕上預覽嵌入的conde。

如果有人能夠告訴我第一行是如何工作的，我可能會弄清楚第二行。

Answer 1

這可能會幫助你。 Bootstrap Grid。

.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>