使用 Bootstrap 为低分辨率显示自适应网站布局时出现问题答案

【问题标题】：Problem displaying adaptive website layout with Bootstrap for low resolution使用 Bootstrap 为低分辨率显示自适应网站布局时出现问题
【发布时间】：2020-06-20 18:23:26
【问题描述】：

我想使用 Bootstrap 为一个小型网站进行自适应设计，但我是新手，在这里找不到任何解决我的问题的方法。我希望能够为各种不同的设备显示标题，这也意味着对于具有小显示屏的手机。所以我写了这样的东西：

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.5">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <title>Test</title>
    </head>
    <body>
    <header class="bg-light">
      <div class="container">
        <div class="row p-3 bg-success rounded">
            <div class="col-md-2 col-sm-3 text-left">
                <img src="images/home.png" class="img-fluid" alt="Home">
            </div>
            <div class="col-md-8 col-sm-6 text-center">
                <h2>MainText</h2>
            </div>    
            <div class="col-md-2 col-sm-3 text-right">
                <img src="images/settings.png" class="img-fluid" alt="Settings">
            </div>          
        </div>
      </div>
    </header>
    </body>
    </html>

它适用于每个网络浏览器都很好，但它不适用于小分辨率。这是该页面的正常视图：

但是在达到一定宽度后（我看到它应该是 576px），它会将我的布局分成三行，每个 div：

它不依赖于文本或图像大小，那里有很多地方，所以它应该是Bootstrap的一种行为。

我怎样才能避免它并进行真正的自适应设计？我的页面很简单，应该是能正常显示的解决方案，我不明白为什么Bootstrap不允许。

【问题讨论】：

标签： html css twitter-bootstrap layout

【解决方案1】：

为较小的屏幕添加 col。您可以删除 col-sm 并仅保留 col- 这发生在您的代码上，因为您没有为比 sm 更小的屏幕设置任何内容，并且默认情况下 bootstrap 将任何列设置为 col-12。所以你在小屏幕上的三行里面有 col-12。标题转到 text-center 类的中心原因，最后一张图片转到 text-right 的左侧原因。

<header class="bg-light">
  <div class="container">
    <div class="row p-3 bg-success rounded">
        <div class="col-md-2 col-sm-3 col-3 text-left">
            <img src="images/home.png" class="img-fluid" alt="Home">
        </div>
        <div class="col-md-8 col-sm-6 col-6 text-center">
            <h2>MainText</h2>
        </div>    
        <div class="col-md-2 col-sm-3 col-3 text-right">
            <img src="images/settings.png" class="img-fluid" alt="Settings">
        </div>          
    </div>
  </div>
</header>

直播example

如果您想在小屏幕上使用不同的方法，请更改 col-* 类。在 Bootstrap 4 中 col-xs-* 已被删除，取而代之的是 col-*。

【讨论】：

感谢您的回复，现在真的可以了！但是我可以再问你一个关于它的问题吗？我之前尝试过 col-xs-3 而不是 col-3，但它没有用。造成这种差异的原因是什么？
我的错，col-xs-* 已在 Bootstrap 4 中被删除，取而代之的是 col-*。您能否为答案投票并打勾？您可以在此处阅读有关媒体查询和booststrap 上的断点getbootstrap.com/docs/4.0/layout/overview