使用Bootstrap重新對齊列3

我正在使用Bootstrap中的三列編碼文章。當我與大屏幕工作好像使用Bootstrap重新對齊列3

Three columns large screen

但是，當我與小屏幕我希望它看起來像工作

Small screen

我如何能做到嗎？

2014-02-21 Filowk

您將不得不使用Column ordering與.col-xx-push-*和.col-xx-pull-*類。通過改變md和sm以符合您的實際需求

<div class="row"> 
    <div class="col-md-6 col-md-push-2 col-sm-12">B</div> 
    <div class="col-md-2 col-md-pull-6 col-sm-6">A</div> 
    <div class="col-md-4 col-sm-6">C</div> 
</div>

播放不同的突破點：

一種解決方案可能看起來像這樣。

在動作上面的例子：jsbin.com/reqilege

來源

2014-02-21 11:51:32 Lipis

哦，它像我複製你的答案，但交叉手指的我沒有。 – rockStar

@rockStar我相信你..因爲這是正確的解決方案，但你有點晚..對不起：/ – Lipis

這裏的關鍵是要具有在順序B，A，C的框。然後你用A的寬度抵消B，並且通過使用絕對定位，你把A釋放出來。

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-offset-3 col-sm-6 col-xs-12"> 
      <h1>B</h1> 
     </div> 
     <div class="col-sm-3 col-xs-6 shift-me"> 
      <h1>A</h1> 
     </div> 
     <div class="col-sm-3 col-xs-6"> 
      <h1>C</h1> 
     </div> 
    </div> 
</div>

CSS

.row { 
    position: relative; 
} 
.row > div { 
    border: 2px solid black; 
} 
.shift-me { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
@media (max-width: 768px) { 
    .shift-me { 
     position: static; 
    } 
}

http://jsfiddle.net/valentin/MkbA2/

來源

2014-02-21 11:53:45 Valentin

沒有必要爲此引入新類。檢查我的答案，Bootstrap爲您提供可以實現不同順序的課程。 – Lipis

@Lipis你是對的，你的解決方案要好得多，我向上投票。我不知道列訂購 – Valentin

@Valentin感謝您的編輯。好的反饋：D – Filowk

您將需要push的b div到第二中和pullA div進入斷定B div的離子。你可以閱讀更多有關列推拉here

<div class="row"> 
    <div id="b" class="col-md-6 col-md-push-3 col-sm-12">Div B</div> 
    <div id="a" class="col-md-3 col-md-pull-6 col-sm-6">Div A</div> 
    <div id="c" class="col-md-3 col-sm-6 ">Div C</div> 
</div>

一個Bootply樣品here。

來源

2014-02-21 11:58:12 rockStar

使用Bootstrap重新對齊列3

回答

相關問題