Twitter引导程序4列的大小调整不正确

Question

我在标记中设置了四列的代码。然而，当它们有响应时，它们会以ipad设备的分辨率缩小到两列，这很好。但在移动视图中，当浏览器一直向下调整大小时，它仍然在每行显示两列，并挤压所有内容，这使它看起来很糟糕。

以下是完整的浏览器屏幕：http://postimg.org/image/jjmr0tukf/

这是中级屏幕：http://postimg.org/image/5azcliqiv/

（需要修复）这是移动屏幕：http://postimg.org/image/60ieuy9cd/

这是标记：

<div class="container center">
    <div class="inside_africa">
    <div class="row feature_wrap">
        <div class="flexible_products">
        Flexible Products
        </div>
<div class="col-xs-6 col-sm-3">
<div class="feature">
<img src="../../images/database.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Database Driven</h3>
<p>Our custom web applications are strategically planned out to give you the right model you need for your company.</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="feature">
<img src="../../images/design_paint.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Design</h3>
<p>We provide responsive design that allows your web application to fit any device and with a touch of craft.</p>
</div>
</div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">
<div class="feature">
<img src="../../images/development.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Development</h3>
<p>Through each phase we add functionality or bells and whistles to make the best product.</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div class="feature">
<img src="../../images/dedication.svg" id="feature_image" style="height: 100px; width: 100px">
<div class="inside_feature">
<h3>Dedication</h3>
<p>We do not look at projects but relationships. We are here to serve you and provide you with the best service possible.</p>
</div>
</div>
</div>
</div>

<div class="technology"><img src="../../images/technology.png" id="backdrop"></div>
    </div>
</div>
<!--/.container-->

Answer 1

我不是Bootstrap专家，但您可能应该更改：

<div class="col-xs-6 col-sm-3">

至：

<div class="col-xs-12 col-sm-6">

超小型设备采用全页面宽度（12列），小型设备和较大采用半屏幕（6列）

编辑

如果在较大的视图中，您希望有4列，则应将其更改为：

<div class="col-xs-12 col-sm-6 col-md-3">

或

<div class="col-xs-12 col-sm-6 col-lg-3">

这取决于您是想让4列只用于超大设备，还是同时用于超大和中型设备。