Twitter bootstrap 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列）为小型设备，以及较大的

EDIT

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

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

或

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

取决于如果你想有只特大型设备或两者兼有额外的大中型设备4列。