在引導自定義嵌套的cols 3

Question

我有一個艱難的要求進行佈局這樣的形象與引導3：

目前，我可以把它像這樣：

這裏是我的示例html佈局：https://jsfiddle.net/isherwood/4etczrwx/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm-6" style="height:500px;background-color:red;"> 
 
      images 
 
     </div> 
 

 
     <div class="clearfix col-sm-6" style="height:100px;background-color:yellow;"> 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
     </div> 
 

 
     <div class="col-sm-3" style="height:200px;background-color:blue;"> 
 
      keyfeature 
 
      <ul> 
 
       <li>testest 1</li> 
 
       <li>testest 2</li> 
 
       <li>testest 3</li> 
 
       <li>testest 4</li> 
 
      </ul> 
 
     </div> 
 

 
     <div class="col-sm-3" style="height:600px;background-color:gray;"> 
 
      Price tab here 
 
     </div> 
 

 
     <div class="col-sm-9" style="height:800px;background-color:green;"> 
 
      Configurator here 
 
     </div> 
 
    </div> 
 
</div>

我覺得我錯過了一些東西讓綠柱？
或者我應該使用推/拉使它按照我的期望工作？

Answer 1

當屏幕寬度變爲786px或更大時，將float: right;屬性應用於灰色塊。爲此我定義了一個新的特殊類.pull-sm-right。

@media (min-width: 768px) { 
 
    .pull-sm-right { 
 
    float: right !important; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
     <div class="col-sm-6" style="height:500px;background-color:red;"> 
 
      images 
 
     </div> 
 

 
     <div class="clearfix col-sm-6" style="height:100px;background-color:yellow;"> 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
 
     </div> 
 

 
     <div class="col-sm-3" style="height:200px;background-color:blue;"> 
 
      keyfeature 
 
      <ul> 
 
       <li>testest 1</li> 
 
       <li>testest 2</li> 
 
       <li>testest 3</li> 
 
       <li>testest 4</li> 
 
      </ul> 
 
     </div> 
 

 
     <div class="col-sm-3 pull-sm-right" style="height:600px;background-color:gray;"> 
 
      Price tab here 
 
     </div> 
 

 
     <div class="col-sm-9" style="height:800px;background-color:green;"> 
 
      Configurator here 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

，如果這是固定佈局比你可以只添加邊距：-200px到綠色的部分是這樣的：jsfiddle.net/4etczrwx/1

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6" style="height:500px;background-color:red;"> 
      images 
     </div> 

     <div class="clearfix col-xs-6" style="height:100px;background-color:yellow;"> 
      text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg text dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdgtext dsgsg sdg sdgsdg 
     </div> 

     <div class="col-xs-3" style="height:200px;background-color:blue;"> 
      keyfeature 
      <ul> 
       <li>testest 1</li> 
       <li>testest 2</li> 
       <li>testest 3</li> 
       <li>testest 4</li> 
      </ul> 
     </div> 

     <div class="col-xs-3" style="height:600px;background-color:gray;"> 
      Price tab here 
     </div> 

     <div class="col-xs-9" style="height:800px;background-color:green;margin-top:-300px;"> 
      Configurator here 
     </div> 
    </div> 
</div> 

乾杯！