2

Bootstrap 4文档 说：

超小型设备（纵向手机，小于 576 像素）

很明显，超小是屏幕宽度小于 576 像素的设备。好吧，少于 576 像素……还有多少？网格不能减少到零。使用 Bootstrap 网格的布局可以在没有明显设计扭曲的情况下被压缩。此外，有些设备的屏幕宽度远小于 576 像素（320 或 240 像素）。

如果我们在数学上将超小型设备支持的屏幕宽度表示为一个间隔，我们会得到[a, b)，b = 576根据文档.. 那么......a等于什么？该文档未涵盖此问题。

下面的代码示例中有一个自适应标题（具有行和 12 列的容器流体）。在Chrome中的开发人员工具中，我找到了a = 360网格尚未扭曲的最后一个值（使用a = 359，第 12 列不适合宽度并转到“新行”）。

当然，我可以重置填充，然后一切都适合 320 和 240 像素，但这个解决方案并不是开箱即用的：

.row > div {
    padding: 0;
}

360 像素真的是 Bootstrap 4 中支持的最小屏幕宽度吗？

快速查看示例：

.header {
  background: rgb(240,240,240);
  min-height: 70px;
  border-bottom: 1px solid gray;
  align-items: center;
  text-align: center;
}

.logo {
  border: 1px dashed black;
  height: 40px;
  width: 100px;
  display: inline-block;
}
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row header">
    <div class="col-1">
      <i class="fas fa-bars"></i>
    </div>
    <div class="col-9 text-center">
      <div class="logo">Logo</div>
    </div>
    <div class="col-1">
      <i class="fas fa-shopping-cart"></i>
    </div>
    <div class="col-1">
      <i class="fas fa-search"></i>
    </div>
  </div>
</div>

简单复制到文本编辑器的相同代码（也许有人想查看开发工具）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

    <style type="text/css">
        .header {
            min-height: 70px;
            border-bottom: 1px solid gray;
            align-items: center;
            text-align: center;
        }

        .logo {
            border: 1px dashed black;
            height: 40px;
            width: 100px;
            display: inline-block;
        }
    </style>

</head>
<body>
    <div class="container-fluid">
        <div class="row header">
            <div class="col-1">
                <i class="fas fa-bars"></i>
            </div>
            <div class="col-9 text-center">
                <div class="logo">Logo</div>
            </div>
            <div class="col-1">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="col-1">
                <i class="fas fa-search"></i>
            </div>
        </div>
    </div>
</body>
</html>
4

1 回答 1

1

你是对的，bootstrap 支持的最低分辨率是 240 x 320 像素。bootstrap 的开发者已经根据当前市场定义了最小宽度。现在出现的大多数功能条手机的分辨率都是 240x320 。但是，如果您想将代码运行到一些老式的酒吧，例如具有 128 x 160 分辨率的 Samsung Guru，您可以相应地自定义定义媒体查询。

于 2019-01-23T09:43:30.327 回答