如何停止引导 div / 缩略图根据屏幕进行调整

Question

我正在创建一个缩略图滑块，例如 this sample。为了实现这一点，我想阻止引导缩略图（div）在显示尺寸减小时被安排为堆栈。 JSFIDDLE:- Sample

<div class="container">
  <div class="row">
    <div class="col-md-12">    
      <div class="row">
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img src="..." alt="..."/>
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>...</p>
              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img src="..." alt="..."/>
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>...</p>
              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail">
            <img src="..." alt="..."/>
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>...</p>
              <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
            </div>
        </div>   
      </div>
   </div>
</div>

Answer 1

如果我理解正确，请将您的列定义更改为：

col-xs-4 col-sm-4 col-md-4

Demo Fiddle

Answer 2

Bootstrap 是移动优先的，因此如果未找到更大的变体，则使用较小的列大小。要使其对所有屏幕尺寸都具有相同的行为，只需定义最小的。

如果您将其设置为以最小尺寸显示为三列，它应该可以解决问题。

<div class="row">
        <div class="col-xs-4">
        </div>
        <div class="col-xs-4">
        </div>
        <div class="col-xs-4">
        </div>
    </div>

Here is a revised fiddle 我认为这是您的目标。