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我认为这是你的目标。

如何根据屏幕调整bootstrap div / thumbnail

2 个答案:

Demo Fiddle