css - 为什么 bootstrap 将 col-md div 更改为 100% 宽度 @max-width :991?

Question

我正在使用 bootstrap，所以它会将我的 div 很好地并排放置，但每当我将窗口调整为 991px 宽度时，它会使这些 div 的宽度为 100% ...

代码:

<div class="row">
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
  <div class="col-md-2">
     <img src="path..."  style="width: 100%; height: auto">
  </div>
</div>

图片(调整为 991px 宽度后):

Answer 1

Bootstrap 3 是移动优先的，这意味着一切都像在小型设备上一样处理，除非您另有说明。要更改列的断点，请使用较小的前缀:

col-xs-2

或

col-sm-2

http://getbootstrap.com/css/#grid

此外，不要在图像上使用内联样式(糟糕)，而是使用 Bootstrap 的响应式图像类:

class="img-responsive"

http://getbootstrap.com/css/#images