Question

当我通过自举程序中的1200（xl）断点时，右侧列开始扩展得更快，并且其中的文本现在距离容器流体的右边缘有点太远了：

Bootstrap, too much space to the right past 1200

我尝试添加flex实用程序mr-auto将屏幕快照中的列一直推到最右边。但是然后它仍然粘在那里，所以我最终不得不设置边距以将其向左推一些。

所需的结果：我希望该列继续像往Bootstraps的最终断点1200一样向右滑动；稍微增加右边的空白区域。

截止到现在，一旦我超过1200，空间的增长就会太快了。它从空间的逐渐增加到火箭的膨胀。我是否需要开始考虑添加更多的断点，还是有另一种方法？

   <div class="container-fluid h-100">
    <div class="row about col-centered">

      <div class="col-md-12 mt-3 mt-md-5">
        <p id="back" class="font-header identity-vw back-nav">---NAV HOLDER</p>
      </div>

      <div class="col-md-4 col-xl-5">
        <p class="font-header">.</p>
      </div>

      <div class="col-md-8 col-xl-7 mt-5">
        <p class="font-header font-size-lg-header">I'M THOMAS<br>THORSTENSSON.</p>
        <p class="font-header font-size-lg-header">I ❤ TO CODE<br>VISUAL STUFF.</p>
      </div>


      <div class="col-md-5">
        <p class="font-header">.</p>
      </div>

      <div class="col-md-auto mt-6">
        <p class="p-w font-size-para">
          Sed ut perspiciatis unde omnis iste natus error sit
          voluptatem accusantium doloremque laudantium, totam
          rem aperiam, eaque ipsa quae ab illo inventore veritatis
          et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas sit aspernatur
        </p>
      </div>
   </div>

Answer 1

好吧，我正在通过添加col-xxl来测试自定义断点，现在它的工作要好得多。在我的SCSS中：

$grid-breakpoints: map-merge(
  $grid-breakpoints,
  (
    xxl: 1600px,
    xxxl: 1800px
  )
);

不过，我仍然想知道，使用其中一些闪亮的Flex utils是否没有更好的方法。

Bootstrap 4.3：超出1200（xl）屏幕宽度的列扩展

1 个答案: