时间戳

首页 > 解决方案 > Bootstrap - 2列 - 在窄屏幕上使图像全宽

html - Bootstrap - 2列 - 在窄屏幕上使图像全宽

问题描述

使用下面的简单 HTML，640 像素正方形的图像出现在左栏中，其他内容出现在右栏中。

有没有一种方法可以控制 HTML / CSS 的响应特性，以便当屏幕宽度 < 375 像素时，左侧栏中的图像不会越来越小，非图像内容会下降到图像下方并且图像占据了视图屏幕的整个宽度？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container-fluid">

    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 1</h2>
            <p>Something happened and something else happened and then it was the end.</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 2</h2>
            <p>Nothing happens without blue cheese sandwiches being served first.</p>
        </div>
    </div>

</div>

标签： htmlcsstwitter-bootstrap

解决方案

只需添加一个媒体查询 css 实体，如下面的代码片段所示。如果屏幕尺寸为 375 像素或更小，这将覆盖引导网格并将其替换为单列网格。

强烈推荐 480 像素，因为它是智能手机纵向的最高宽度。

@media only screen 
  and (max-width: 375px) {
    .container-fluid .row {
      display: grid;
      grid-template-columns: 1fr;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container-fluid">

    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 1</h2>
            <p>Something happened and something else happened and then it was the end.</p>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="col">
            <img src="https://via.placeholder.com/640" class="img-fluid">
        </div>
        <div class="col">
            <h2>Section 2</h2>
            <p>Nothing happens without blue cheese sandwiches being served first.</p>
        </div>
    </div>

</div>

推荐阅读