在引導

Question

浮動列我試圖做的事：http://codepen.io/Chris-Brennan/pen/pjjELq

而且這裏有什麼即時試圖做http://s1.postimg.org/elbjj3ifz/temp.jpg

堆棧COL-1在彼此的頂部& COL-3浮動到PIC左邊。高度300像素 堆棧COL-2 &每個浮動到合適的高度300像素 中間列我命名報頭高度（人綠色的PIC）的頂部COL-4 600px的

我需要COL-3捕捉在放在col-1下面。 我需要col-4在col-2下方卡入到位 我嘗試清除浮動並沒有任何工作。我嘗試使用類拉和左拉，沒有成功。

<div class="container-fluid"> 
<div class="row"> 
<div class="col-lg-4 col-xs-12" id="colxs12">col-1</div> 
<div class="col-lg-4 col-xs-12" id="header"></div> 
<div class="col-lg-4 col-xs-12" id="colxs12">col-2</div> 
</div> 
<div class="row"> 
<div class="col-lg-4 col-xs-12" id="colxs13">col-3</div> 
</div> 
<div class="row"> 
<div class="col-lg-4 col-xs-12" id="colxs14">col-4</div> 
</div> 
</div> 


.container { 
text-align: center; 
} 
#colxs12{ 
height:300px; 
background:skyblue; 
border:1px solid black; 
} 
#colxs13{ 
float:left; 
height:300px; 
background:skyblue; 
border:1px solid black; 

} 
#colxs14{ 
float:right; 
height:300px; 
background:skyblue; 
border:1px solid black; 
} 
#header{ 
background:url(http://www.edgallucciphotography.com/site/wp- content/gallery/al-green/6-al-green_b1-f12y.jpg)no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
height:600px; 
} 
#header h1{ 
color:white; 
} 
#table{ 
margin-top:20px; 
width:500px; 
} 

Answer 1

將您的佈局分爲三列，並有第一和最後一列有兩行與每一列。第二欄只有一行與圖片。所以列使用提供

基本上整個空間，像100％：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="row"> 
     <div class="col-lg-4 col-xs-12" id="colxs12">col-1</div> 
     </div> 
     <div class="row"> 
     <div class="col-lg-4 col-xs-12" id="colxs13">col-3</div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
      <div class="row"> 
     <div class="col-lg-4 col-xs-12" id="header"></div> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="row"> 
     <div class="col-lg-4 col-xs-12" id="colxs12">col-2</div> 
     </div> 
     <div class="row"> 
     <div class="col-lg-4 col-xs-12" id="colxs14">col-4</div> 
     </div> 
    </div> 
    </div> 
</div> 


.container { 
    text-align: center; 
    } 
#colxs12{ 
    height:300px; 
    width: 100%; 
    background:skyblue; 
    border:1px solid black; 
} 
#colxs13{ 
    width: 100%; 
    height:300px; 
    background:skyblue; 
    border:1px solid black; 

} 
#colxs14{ 
    width: 100%; 
    height:300px; 
    background:skyblue; 
    border:1px solid black; 
} 
#header{ 
    background:url(http://www.edgallucciphotography.com/site/wp-content/gallery/al-green/6-al-green_b1-f12y.jpg)no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:600px; 
    width: 100%; 
} 
#header h1{ 
    color:white; 
} 
#table{ 
    margin-top:20px; 
    width:500px; 
}