2015-08-16 71 views
0

爲什麼2個.col div堆疊在一起,以及如何在boostrap的另一側重複此操作?

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

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

+0

而不是發佈的代碼,如果你能在這裏嵌入您的代碼段,或者一個的jsfiddle/plunkr片段,它會更容易調試:) –

+0

@PraveenSingh道歉,因爲這是我第一次在這裏發佈 - 代碼已經嵌入了。非常感謝 – HakBon

回答

0

這可能會幫助你。 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>

+0

非常感謝您的迴應!我相信第二個.box6應該是.box7 - 我也不知道你爲什麼使用2 .container-fluids並且在.row類之外有.box1(.col-sm-6)。 – HakBon

+0

我一直在尋找那個鏈接 - 在BS上的網格系統幾天,但只有在你如何嵌套col cols之後,我想如何實現我的佈局。雖然我不得不承認,但我仍然不確定第一行是如何在我的代碼片段中工作的,因爲我沒有遵循這種嵌套方法。有任何想法嗎? – HakBon

+0

你不需要兩個容器,這只是爲了分離兩個例子,基本上你想要第一個(Box1)在行外,因爲bootstrap增加了填充的方式,並且因爲它是單獨的(不像嵌套的其餘部分請不要忘記標記爲已回答的問題,以便其他人可以從中受益 – vanburen