Bootstrap Column重新排序大小调整问题

Question

我正在尝试通过Bootstrap重新排序列的方法重新排序我的网站上的列，具体取决于屏幕大小，这对于我测试的大多数响应式布局都很好。

有问题的布局是Tablet Landscape Layout（1024 x 768），显示如下：

如果屏幕太小，则每隔一个屏幕显示蓝色div和右侧div，顶部为红色div，右侧为蓝色div，如果屏幕足够大，则蓝色div与其正好对齐。

这是我现在正在使用的代码：

<div class="container">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <div class="row clearfix">
            <div class="col-xs-12 col-sm-12 col-md-push-8 col-md-4 col-lg-push-8 col-lg-4 col-xl-push-8 col-xl-4" style="background: red">
                Basket
            </div>
            <div class="col-xs-12 col-sm-12 col-md-pull-8 col-md-8 col-lg-pull-4 col-lg-8 col-xl-pull-8 col-xl-8" style="background: blue">
                News
            </div>
        </div>
    </div>
</div>

有没有人知道为什么蓝色div在平板电脑风景布局的右边这么远，而不是像它应该触摸红色div？

Answer 1

一些常见的标记问题：

• 首先，没有?:，所以你可以摆脱它们。
• 其次，您不需要col-xl-*，因为默认情况下它占用整个宽度，除非另有说明。
• 第三，Bootstrap首先是移动的，因此较大的尺寸将覆盖现有的较小尺寸，这意味着如果您不打算更改某些东西，则无需再次指定更大的尺寸。

实际问题是col-xs-12与 元素放置的位置有关。请记住，您没有更改文档流程中的任何内容。因此元素正常定位，然后与col-*-pull-*或left进行相移。由于蓝色容器通常会从4列开始，因此您只需将其向后拉4列，而不是8列。

整个事情可以像这样重写：

right

.red  { background: red  }
.blue { background: blue }