Question

我正在尝试使用twitter bootstrap grid每行4列。

我遇到了一个问题，如果我在页面调整大小或太小时将图像放入div中，每行的列数会变小。

看看这个jsFiddle

<div class="col-lg-12">
    <div class="row">
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />  
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />         
    </div>
</div>

你可以看到每行有两个列，而不是4，因为页面太小了，好吧没关系。

但我不能只使用img标签，我需要将它包装在div中以实现此设计：

img http://gyazo.com/1782577875acd356dd8f3d436c96b7e5.png

所以我将它们包装在一个div中，然后看看这个jsFiddle

<div class="col-lg-12">
    <div class="row">
        <div>
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
        </div>
        <div>
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
        </div>
        <div>
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
        </div>
        <div>
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
        </div>
        <div>
            <img class="col-lg-3" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />   
        </div>

我将它们添加到div中后，每行只有一列。

为什么会发生这种情况？如何防止这种情况发生？

Answer 1

12列行将包含4个3列容器，而不是5 ...请阅读网格上的文档http://getbootstrap.com/css/#grid

由于Bootstrap流畅且响应迅速，您将从阅读文档中看到，您可以调整每个断点的列数，前提是它们仍然可以加起来为12.还有一个缩略图组件，它可能适合您：{ {3}}

注意图像上的类img-responsive。以下是从非常小的视口到非常大的4个流体列的示例，因为它使用col-xs-*。您可以使用col-sm-*作为最小宽度768px，使用col-md-*作为最小宽度992px，使用col-lg-*作为最小宽度1200px，您也可以使用GetBootstrap.com上的自定义程序或或者从核心使用LESS。

<强> http://getbootstrap.com/components/#thumbnails

<div class="container">
 <div class="row">
  <div class="col-xs-3">
   <img class="img-responsive" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />
  </div>
  <div class="col-xs-3">
   <img class="img-responsive" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />
  </div>
  <div class="col-xs-3">
   <img class="img-responsive" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />
  </div>
  <div class="col-xs-3">
   <img class="img-responsive" src="http://www.swansea.ca/images/sample-ad-270x270.jpg" />
  </div>
 </div>
</div>

Twitter引导网格 - 如果img在div中，每行的数量会变小

1 个答案: