4

在 Bootstrap 3 中禁用响应后，我在列排序方面遇到了一些问题。

<div class="row">
    <div class="col-xs-9 col-md-push-3">...</div>
    <div class="col-xs-3 col-md-pull-9">...</div>
</div>

如果我这样做，它会影响分辨率低于 1024 的布局 - 块会改变位置。我尝试了另一种解决方案，比如这个......

<div class="row">
    <div class="col-xs-9 col-xs-push-3">...</div>
    <div class="col-xs-3 col-xs-pull-9">...</div>
</div>

... 和这个...

<div class="row">
    <div class="col-md-9 col-md-push-3">...</div>
    <div class="col-md-3 col-md-pull-9">...</div>
</div>

...而且它们都不能正常工作。

我只想禁用响应性并强制 col-9 块在 HTML 文档中首先出现，然后 col-3 以任何分辨率跟随它，但是 col-3 块（侧边栏）必须左对齐并且 col-9 块（主要内容）必须对齐。有什么建议么？

4

1 回答 1

4

另请阅读 http://getbootstrap.com/getting-started/#disable-responsive和/或尝试一下。https://github.com/bassjobsen/non-responsive-tb3。使用 col-xs-* 类似乎是正确的（因为它们从不堆叠）。xs 网格没有拉、推和偏移类。

在您的情况下，添加一个浮动权利似乎是一个解决方案：

<div class="container" style="background-color:white;">
    <div class="row">
    <div class="col-xs-9" style="background-color:red;float:right;">Right</div>
    <div class="col-xs-3" style="background-color:yellow;">Left</div>
    </div>
    <div class="row">
    <div class="col-xs-9" style="background-color:green;">Right</div>
    <div class="col-xs-3" style="background-color:blue;">Left</div>
    </div>
</div>
于 2013-09-24T18:43:37.253 回答