Question

我正在使用“ boostrap 3”。我想在2张图像的列中放置4张图像，如下所示：

______   ______
 |Image|  |Image|

 ______   _______
 |Image|  |Image|

代码如下所示：

<div class="row">
    <!--Reglamento-->
    <div class="col-sm-2">
    <a href="Second_web.html">
        <img src="img/test_img.png" width=100%>
        <div class="box_text">
            Reglamento_text
        </div>
    </a>
    </div>

    <!--Armamento-->
    <div class="col-sm-2">
        <a href="Second_web.html">
            <img src="img/test_img.png" width=100%>
            <div class="box_text">
                Armamento_text
            </div>
        </a>
        </div> 
</div>
<div class="row">
    <!--MISC-->
    <div class="col-sm-2">
        <a href="Second_web.html">
            <img src="img/test_img.png" width=100%>
            <div class="box_text">
                MISC
            </div>
        </a>
        </div>
</div>

CSS看起来像这样：

.box_text {
margin-bottom: 20px;
}

img {
    max-width: 100px;
    height: auto;
}

调整屏幕大小时，我希望图像调整大小并变小，并保持相同的比例，但是右列移动，所有图像都覆盖整个屏幕。

Answer 1

如果您要连续两张图像，为什么要使用col-sm-2而不是col-sm-6？

无论如何，要回答您的问题，您应该阅读有关boostrap3断裂点的信息。查看col-sm在哪里变成100%宽度的列。您可以在bs3 docs

上找到更多信息。

因此，如果希望您的列始终保持2行在一行上，请添加col-xs类。（这是在bs3中，在bs4 col-xs中不存在。如果更新到bs4，请阅读更改日志，然后阅读bs4-> bs4 docs））

我更改为col-6，但是如果您需要的话可以离开col-2。

请参见下文或jsfiddle

.box_text {
  margin-bottom: 20px;
}

img {
  max-width: 100px;
  height: auto;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <!--Reglamento-->
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
        <img src="https://via.placeholder.com/150" width=100%>
        <div class="box_text">
            Reglamento_text
        </div>
    </a>
  </div>

  <!--Armamento-->
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
            <img src="https://via.placeholder.com/150" width=100%>
            <div class="box_text">
                Armamento_text
            </div>
        </a>
  </div>
</div>
<div class="row">
  <!--MISC-->
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
            <img src="https://via.placeholder.com/150" width=100%>
            <div class="box_text">
                MISC
            </div>
        </a>
  </div>
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
            <img src="https://via.placeholder.com/150" width=100%>
            <div class="box_text">
                MISC
            </div>
        </a>
  </div>
</div>

调整内容大小而不是移动内容

1 个答案: