推/拉多行的列

我不知道，如果我的做法是有道理的，但是，我需要實現這樣的畫面佈局：推/拉多行的列

Bootstrap layout

現在，我正在寫只是一個單一的<div class="row"></div>並代表每個區域內有一列，例如<div class="col-sm-4></div>。

沒有黃色區域，這工作得很好：

<div class="row"> 
    <div class="col-sm-4 col-sm-push-8">green</div> 
    <div class="col-sm-4 col-sm-pull-4">red</div> 
    <div class="col-sm-4 col-sm-pull-4">blue</div> 
</div>

如何添加黃色區域？沒有col-pull-16或者類似的東西，怎麼走？

謝謝。

來源

2014-09-04 Fabio B.

不能沒有使用Flexbox的或jQuery的或使用CSS做隱藏並顯示並複製html。 – Christina 2014-09-05 06:19:44

你需要檢查Flexbox和sepcially的order屬性（http://css-tricks.com/snippets/css/a-guide-to-flexbox/）

來源

2014-09-04 22:14:41 AhmadAssaf

你能舉個簡單的例子，給我一個想法嗎？ – 2014-09-05 05:37:03

提供的鏈接上有一個示例，並提供了大量使用Google搜索的示例。 – Christina 2014-09-05 06:20:31

看看這個。希望能幫助到你。

<div class="row"> 
    <div class="hidden-xs col-sm-4 col-md-4 col-lg-4"> 
     RED 
    </div> 
    <div class="hidden-xs col-sm-4 col-md-4 col-lg-4"> 
     BLUE 
    </div> 
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
     Green 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 navbar-fixed-bottom"> 
     <div class="row"> 
      <div class="col-xs-12 hidden-sm hidden-md hidden-lg"> 
       Red 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-xs-12 hidden-sm hidden-md hidden-lg"> 
       BLUE 
      </div> 
     </div> 
    </div> 
</div>

的jsfiddle

http://jsfiddle.net/68n54p47/2/

來源

2014-09-04 22:11:05

'col-sm-4 col-md-4 col-lg-4'非常多餘，相當於簡單的'col-sm-4'！ – cvrebert 2014-09-04 23:34:15

謝謝，但那不是我要找的。我不想複製區域，黃色框不是主體。這是一個專欄。 – 2014-09-05 05:38:07

推/拉多行的列

回答

相關問題