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

Twitter bootstrap 4列没有正确调整大小

1 个答案: