Bootstrap v5：列元素在较小的屏幕上变得更远？答案

【问题标题】：Bootstrap v5: Column elements become farther apart on smaller screens?Bootstrap v5：列元素在较小的屏幕上变得更远？
【发布时间】：2021-01-18 06:20:12
【问题描述】：

在我的宽屏显示器上，我的封面是这样的（这就是我想要的样子）：

但在我的小屏幕笔记本电脑上，文字和按钮（分别位于两个单独的列中）分散开来，我的封面看起来像这样：

我尝试了几件事，但似乎无法让它们在较小的屏幕上粘在一起。以下是相关的 HTML 代码：

HTML：

  <div class="container h-100">
  <div class="row d-flex h-100 justify-content-center align-items-center g-0">
      <div class="col-sm-6">
            <div class="row">
                <h1 class="title">transfer your</h1>
            </div>
            <div class="row">
                <h1 class="title">music</h1>
            </div>
            <div class="row">
                <h2 class="subtitle">between Spotify & YouTube</h2>
            </div>
      </div>
      <div class="col-sm-4">
          <div class="row mb-3">
            <a class="btn" id="sp-to-yt" href="#" role="button">
            </a>
          </div>
          <div class="row">
            <a class="btn" id="yt-to-sp" href="#" role="button">
            </a>
          </div>
      </div>
  </div>
</div>

【问题讨论】：

标签： html css bootstrap-5

【解决方案1】：

它基于百分比宽度。您可以使用响应式类来管理每个屏幕尺寸。

对于小屏幕使用<div class="col-sm-6"></div>，它将在小屏幕上显示半角。您可以像这样使用多个响应式类...

<div class="col-sm-6 col-md-8 col-lg-3 col-xl-4"></div>

响应式元素可以记住为 sm = small、md = medium、lg = large 等，并将控制每个断点的 div 宽度。记住默认的最大列数是 12。

另外，在你的行中。<div class="row d-flex h-100 justify-content-center align-items-center g-0"> 你不需要定义显示 flex，因为 .row 已经是一个显示 flex 类。

【讨论】：