牵引/推动引导毛刺 [英] Bootstrap glitch in pull / push

问题描述

从这个问题开始左栏边栏三栏式Bootstrap布局在底部我了解了Bootstrap列的push和pull。

下面的代码几乎可以得到我想要的结果：

>

问题是调整屏幕大小，在大约1200px宽度，两个 aside 元素（蓝色和绿色）是一个在另一个旁边（你可以检查代码段）。

任何帮助？

  div，aside {height：50px} .content {background：lightpink;}。side1 {background：lightblue;}。side2 {background：lightgreen;}  

 < link rel =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap .min.css/>< div class =container> < div class =content left col-md-7 col-lg-push-2>< / div> < aside class =side1 left col-md-2 col-lg-pull-7>< / aside> < aside class =side2 left col-md-3>< / aside>< / div>  
解决方案
这不是故障。你在混合大小。 
 
 
 
 
 
 
  div，aside {height：50px} .content {background： lightpink;}。side1 {background：lightblue;}。side2 {background：lightgreen;}  
 
 < link rel =stylesheethref =// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css/>< div class =container > < div class =content left col-md-7 col-md-push-2>< / div> < aside class =side1 left col-md-2 col-md-pull-7>< / aside> < aside class =side2 left col-md-3>< / aside>< / div>  
 
starting from this question Three column Bootstrap layout with left sidebar at bottom I learned about Bootstrap column push and pull.

The snippet below almost works in getting the result I want:



The problem is the resizing the screen, at around 1200px width the two aside elements (blue and green) are one beside the other (you can check the snippet).

Any help?



div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}

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

<div class="container">
  <div class="content left col-md-7 col-lg-push-2"></div>
  <aside class="side1 left col-md-2 col-lg-pull-7"></aside>
  <aside class="side2 left col-md-3"></aside>
</div>



解决方案
It's not a glitch. You're mixing sizes. Your pushes and pulls should be set at the same breakpoint as the column declarations.



div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}

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

<div class="container">
  <div class="content left col-md-7 col-md-push-2"></div>
  <aside class="side1 left col-md-2 col-md-pull-7"></aside>
  <aside class="side2 left col-md-3"></aside>
</div>





                        
这篇关于牵引/推动引导毛刺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！