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

像这样:

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