Question

我的网页包含网格col-md-8和col-md-4。我想要实现的是在col-md-4部分中，在一行上有两个元素（图像拇指），然后在下一行/行上另外两个图像，依此类推。 HTML的结构如下：

<div class="row">    
  <div class="col-md-8">
      <!-- some text here -->
  </div>   
  <div>  
    <div class="col-md-4">
      <div class="tool">
        <img src="image.jpg" style="width:100px; height:75px;"> 
      </div>
    </div>  
  </div>
</div>

Here is the JSFIDDLE我试图将4张小图片放在大图片的右边，2x2放在网上。

Answer 1

尝试以下代码

<强> HTML

<div class="row">    

<div class="col-md-8">
    <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" />
</div>   

<div class="col-md-4">
    <div class="row">

    <div class="col-md-6">
        <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" />
        </div>

        <div class="col-md-6">
        <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" />
 </div>
        <div class="col-md-6">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" />
             </div>

        <div class="col-md-6">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;" /> 
             </div>
    </div>
</div>

Answer 2

不确定如何在每一行上放置两个图像，但您可以使用这样的方法，基本上，每行图像都有一个row：

<div class="col-md-4">
    <div class="tool">
        <div class="row">
            <div class="col-md-12">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;">
            </div>
        </div>
    </div>
</div>

您可以将每张图片放在特定大小的div中，例如，将每张图片放在col-md-6 div中，而不是放在col-md-12中，但这取决于你想要做什么。

此外，默认情况下，bootstrap 3中的图像不响应，因此您需要将img-responsive类添加到所有图像中，以便正确调整其大小。

Answer 3

您的具体案例是错过了关闭div并且jsfiddle窗口太窄而无法响应col-md-4。

我修复了结束div并改为col-xs-4。您可以在此处查看更正的小提琴：http://jsfiddle.net/1ezk5oev/

<div class="row">    
    <div class="col-xs-4">
        <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" width="200"/>
    </div>    
    <div class="col-xs-4">
        <div class="tool">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>    
        </div>
    </div>
</div>

Answer 4

以下代码将解决您的问题。如果您希望图片分别更改尺寸，也可以使用class='img-responsive'替换样式。

<div class="row">    
<div class="col-md-8">
    <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg"/>
</div>   
<div>  
<div class="col-md-4">
    <div class="tool">
        <div class="row">
            <div class="col-md-6">
                 <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
            </div>
            <div class="col-md-6">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
             </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
            </div>
            <div class="col-md-6">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" class="img-responsive"/>
            </div>
        </div>
     </div>
  </div>
</div>

Answer 5

我个人觉得使用桌子这样的东西是最好的方法。如果您也喜欢它，请使用以下示例：

<table>
<tr>
    <td rowspan="2">
        <div class="col-md-8">
            <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg"/>
        </div>
    </td>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>
    <td>
        <div class="col-md-4">
            <div class="tool">
                <img src="http://www.extremetech.com/wp-content/uploads/2013/09/4Vln8-640x428.jpg" style="width: 100px; height: 75px;"/>
            </div>
        </div>
    </td>                    
</tr>

代码也可以在http://jsfiddle.net/9se6Lep0/

找到

使用bootstrap

5 个答案: