Bootstrap 3响应容器宽度而不是屏幕宽度

Question

我正在使用Bootstrap 3并习惯使用屏幕宽度，现在当它低于某个屏幕宽度时，行会变为水平而不是分布在列上。

但是，我希望我的容器是屏幕宽度，所以如果容器宽度<768px，则线条变为水平。

我尝试过使用.container-fluid，但它并不适合我。我该如何解决这个问题？

<div style="width:200px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">Test</div>
            <div class="col-sm-6">Test</div>
        </div>
    </div>
</div>

Answer 1

如果您不希望列折叠，请使用col-xs而不是col-sm。

像这样：

＆＃13;

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div style="width:200px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6" style="background:red">Test</div>
            <div class="col-xs-6" style="background:yellow">Test</div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;