Question

我正在尝试使用Bootstrap v4（alpha 3）为我正在处理的Web应用程序创建响应式布局。

一切都在大部分时间起作用，但我真正挣扎的是使用推拉类重新排序我的牌。根据我的理解，推拉类在正确使用时重新排序卡片，而布局的其余部分响应订单的更改，如“排列”下的文档的“网格系统”部分所述＆＃39;：

使用.push-md- *轻松更改内置网格列的顺序和.pull-md- *修饰符类。

可在此处找到：http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering

然而，当使用这些类时，似乎不是重新排序卡片，而是只是左右移动它们（甚至可以重叠或离开屏幕的点，这个功能也由他们的css建议）。这也意味着它们具有与偏移功能完全相同的功能，其目的是将卡移动x个列。

我已经设法让他们在过去按预期工作，但不知道如何。那么有人可以告诉我我做错了什么吗？

HTML：

<div class="container">
    <div class="row">   
       <div class="card card1 col-lg-4 col-md-6"></div>
       <div class="card card2 col-lg-4 col-md-6"></div>
       <div class="card card4 col-lg-8 col-md-12 push-lg-4"></div>
       <div class="card card3 col-lg-4 col-md-6 pull-lg-8"></div>        
    </div>
</div>

CSS：

.card{height: 150px;}
.card1{background-color:red;}
.card2{background-color:blue;}
.card3{background-color:green;}
.card4{background-color:yellow;}

的jsfiddle： https://jsfiddle.net/61yoqkjk/5/

预期的行为是，在大尺寸和更高尺寸时，绿色框将向上移动到与红色和蓝色框相同的线上。然而，相反绿色和黄色的盒子交换位置，但现在在绿色框可以适合的蓝色框的右边有一个间隙。

这已经尝试过Bootstrap 3，所以我不认为这是一个错误。我也检查了其他类似的问题，但他们的答案似乎都没有解决我的问题。

Answer 1

我认为你可能会误解，引导程序是如何工作的。你想要的是，这些元素会切换他们的位置＆＃34;通过拉/推它们（这很难用css实现）。相反，什么引导程序是辅助类push-xx和pull-xx可视地移动元素。例如。 pull-lg-8的代码是：

.pull-lg-8 {
    right: 66.666667%;
}

......这不会影响其他元素。想象一下，浏览器首先使用width, height, float, display, ...之类的属性计算每个元素的布局框，然后，在每个元素都有一个特定的位置之后，相对定位的元素可视地移动到不同的位置（如果{使用了{1}}。从结构的角度来看，它们仍然占据相同的空间，但不会影响其他元素。

因此你的黄色元素（对于第一行来说太大了）在第二行占据了2/3的空间，而你的绿色元素在第二行中的盒子位于最右边，然后推动2 / 3在左边。

Bootstrap v4推拉网格类没有按预期工作

1 个答案: