bootstrap列push / pull未按預期工作

Question

我想為小型，中型和大型屏幕尺寸設計以下設計::

對於超小屏幕我想要它：

這是我的代碼：

 .one { background-color: #00CCFF; } .two { background-color: #FFCCCC; } .three { background-color: #99CCFF; } .four { background-color: #CCFF33; } .five { background-color: #FF9900; } .six { background-color: #996666; } .mytab { height: 50px; } .abc { height: 100px; background-color: #090; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-9 col-sm-push-3 abc">ABC</div> <div class="col-xs-12 col-sm-3 col-sm-pull-9"> <div class="row"> <div class="col-xs-4 col-sm-12 one mytab">1</div> <div class="col-xs-4 col-sm-12 two mytab">2</div> <div class="col-xs-4 col-sm-12 three mytab">3</div> </div> </div> <div class="col-xs-12 col-sm-9 col-sm-push-3"> <div class="row"> <div class="col-xs-4 four mytab">4</div> <div class="col-xs-4 five mytab">5</div> <div class="col-xs-4 six mytab">6</div> </div> </div> </div> <!-- row --> 

以上代碼僅為超小尺寸產生正確的布局。 對於所有其他尺寸，我得到以下結果：

我不需要白色空間。 推送/拉動可能會導致我做錯了。 任何建議/代碼更改建議都會非常有用。

Answer 1

你並不需要使用push和pull班，以達到所需的輸出。 對CSS進行以下更改：

• 在ABC div ，刪除.col-sm-push-3並添加.pull-right以將div float到right
• 在父div含有，1，2和3中，除去.col-sm-pull-9
• 在父div含有，4，5和6，除去.col-sm-push-3

 .one { background-color: #00CCFF; } .two { background-color: #FFCCCC; } .three { background-color: #99CCFF; } .four { background-color: #CCFF33; } .five { background-color: #FF9900; } .six { background-color: #996666; } .mytab { height: 50px; } .abc { height: 100px; background-color: #090; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-9 pull-right abc">ABC</div> <div class="col-xs-12 col-sm-3"> <div class="row"> <div class="col-xs-4 col-sm-12 one mytab">1</div> <div class="col-xs-4 col-sm-12 two mytab">2</div> <div class="col-xs-4 col-sm-12 three mytab">3</div> </div> </div> <div class="col-xs-12 col-sm-9"> <div class="row"> <div class="col-xs-4 four mytab">4</div> <div class="col-xs-4 five mytab">5</div> <div class="col-xs-4 six mytab">6</div> </div> </div> </div> 

為什么會這樣？

當有足夠的空間讓它們適合時，左浮動元素應該彼此相鄰堆疊。 雖然看起來這應該在您的原始示例中發生，但它具有欺騙性，因為您已使用相對定位將框移動到所需位置。

在效果上， div含有1，2和3實際上是在父的右邊緣div （因為它被推向它出現在左側left由25%因此存在沒有空間4，5和6 div適合，所以它被推到一個新的線上。

Answer 2

你可以使用float hack來占據上面的空間。 新類.align-top添加了浮動屬性。 或者，內置的pull-right類與我添加的新類具有相同的屬性。 最好使用它。

 .one { background-color: #00CCFF; } .two { background-color: #FFCCCC; } .three { background-color: #99CCFF; } .four { background-color: #CCFF33; } .five { background-color: #FF9900; } .six { background-color: #996666; } .mytab { height: 50px; } .abc { height: 100px; background-color: #090; } /* Below class is equivalent to pull-right of Bootstrap builtin code */ .align-top { float: right !important; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-xs-12 col-sm-9 col-sm-push-3 abc">ABC</div> <div class="col-xs-12 col-sm-3 col-sm-pull-9 align-top pull-right"> <div class="row"> <div class="col-xs-4 col-sm-12 one mytab">1</div> <div class="col-xs-4 col-sm-12 two mytab">2</div> <div class="col-xs-4 col-sm-12 three mytab">3</div> </div> </div> <div class="col-xs-12 col-sm-9 col-sm-push-3"> <div class="row"> <div class="col-xs-4 four mytab">4</div> <div class="col-xs-4 five mytab">5</div> <div class="col-xs-4 six mytab">6</div> </div> </div>