Question

我正在用HTML模板编写一个部分，希望对台式机，移动设备和平板电脑做出响应。到目前为止编写的代码是

<section class="se2">
          <div class="container"></div>
          <div class="row justify-content-md-center">
              <div class="row col-12">
                <div class="col-xs-4 col-xs-offset-4 col-4"><img src="http://via.placeholder.com/250x250"/></div>
                <div class=" col-xs-4 col-xs-offset-4 col-4"><img src="http://via.placeholder.com/250x250"/></div>
                <div class=" col-xs-4 col-xs-offset-4 col-4"><img src="http://via.placeholder.com/250x250"/></div>
                </div>
            </div>
          </div>
      </section>

但这不适用于手机。

我在手机屏幕上的搜索结果低于预期。enter image description here

在手机上，这些盒子应该一个接一个地倒。而在桌面上的同一行中

Answer 1

尝试一下

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="se2">
          <div class="container"></div>
          <div class="row justify-content-md-center">
                <div class="col-xs-12 col-xs-offset-4 col-md-4">
                  <img src="http://via.placeholder.com/250x250"/>
                </div>
                <div class=" col-xs-12 col-xs-offset-4 col-md-4">
                   <img src="http://via.placeholder.com/250x250"/>
                </div>
                <div class=" col-xs-12 col-xs-offset-4 col-md-4">
                    <img src="http://via.placeholder.com/250x250"/>
                </div>
            </div>
      </section>

Answer 2

在容器div之后删除结束div标签

<section class="se2">
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="row col-12">
                <div class="col-xs-4 col-xs-offset-4 col-4"><img src="http://via.placeholder.c`enter code here`om/250x250"/></div>
                <div class=" col-xs-4 col-xs-offset-4 col-4"><img src="http://via.placeholder.com/250x250"/></div>
                <div class=" col-xs-4 col-xs-offset-4 col-4"><img src="http://via.placeholder.com/250x250"/></div>
            </div>
        </div>
    </div>
</section>

适用于台式机和移动设备的响应式图像列

2 个答案: