引導3個格框應該採取免費的垂直空間

Question

其實我與引導3.3.6工作，並希望才達到自舉電網系統如下：

這些箱子都在同一<div class="row">標籤和我想的是，盒4發生在左側的可用空間下面的方框1

的的jsfiddle https://jsfiddle.net/byrd9wx2/

我知道如何做到這一點與普通的HTML + CSS，但不與引導揹帶。

感謝您的幫助！

Answer 1

您可以通過重新排序BOX2 & BOX3和浮動那些正確實現這個用引導網格系統。

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
.content-box { 
 
    border: 2px solid black; 
 
    padding: 2px; 
 
} 
 

 
.mainbody{ 
 
    padding: 50px; 
 
} 
 

 
.box-spacing{ 
 
    margin-bottom: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="mainbody"> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing"> 
 
      <div class="content-box"> 
 
       <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing pull-right"> 
 
      <div class="content-box"> 
 
       <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing pull-right"> 
 
      <div class="content-box"> 
 
       <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box-spacing"> 
 
      <div class="content-box"> 
 
       <div style="background: yellow">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

最簡單的方法是將BOX1和BOX4都放在第一列中。

#box1 { 
 
    height: 60px; 
 
    background-color: blue; 
 
} 
 
#box2 { 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 
#box3 { 
 
    height: 75px; 
 
    background-color: yellow; 
 
} 
 
#box4 { 
 
    height: 30px; 
 
    background-color: green; 
 
} 
 
#box1,#box2,#box3,#box4 { 
 
    text-align: center; 
 
    color:white; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div id="box1">BOX1</div> 
 
     <div id="box4">BOX4</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div id="box2">BOX2</div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <div id="box3">BOX3</div> 
 
    </div> 
 
    </div> 
 
</div>