Question

在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块（主要）内容）必须正确对齐。有什么建议吗？

Answer 1

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

在你的情况下添加一个浮动似乎是一个解决方案：

<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>

禁用响应和列排序

1 个答案: