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

Question

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

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

我已经尝试了几种方法，但我似乎无法让它们在较小的屏幕上粘在一起。这是相关的 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>

Answer 1

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

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

<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"> 您不需要定义显示弹性，因为 .row 已经是显示弹性 class.

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

Bootstrap v5: Column elements become farther apart on smaller screens?

html

css

bootstrap-5