创建动态引导联系页面

Question

这张图片应该有助于总结我想要完成的工作。

可以在这里找到代码：https://codepen.io/MatteCrystal/pen/xxXpLmK

<div class="container">
      <div class="row">
        <div class="row gy-2">
            <div class="col text-end minWidth200 maxWidth200">
               <b>Title:    </b>
            </div>
            <div class="col minWidth350">
               Info that spans <br />
               multiple lines
            </div>
         </div>
        <div class="row gy-2">
            <div class="col text-end minWidth200 maxWidth200">
               <b>Title 2:  </b>
            </div>
            <div class="col minWidth350">
               More info, that gives lots of details about somthing to the user
            </div>
         </div>
        <div class="row gy-2">
            <div class="col text-end minWidth200 maxWidth200">
               <b>Title 3:  </b>
            </div>
            <div class="col minWidth350">
               Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince. 
            </div>
         </div>
      </div>
  </div>

基本上，我希望联系页面由两个内容组成。标题部分，然后是标题右侧的信息部分。但在小屏幕上，与其让标题占据宝贵的宽度，我更愿意将信息部分放在标题下方。

标题元素被强制为相同大小，因此它们看起来都一致，文本部分有一个可以达到的最小大小，但它也可以变大以适应页面。

问题是标题元素有引导文本结束类来对齐标题。但是当满足最小尺寸限制时，两列将相互堆叠。发生这种情况时，标题元素需要左对齐，否则看起来很尴尬。您可以在这张图片中看到我的意思。

那么是否有任何优雅的或内置的引导类可以达到我想要的结果？如果我决定增加或减少标题或信息元素允许的最小或最大宽度，我想要一个灵活且不需要额外更改的解决方案。理想情况下，我需要一个选项来检测具有两个或更多列的引导行何时变得足够小，以至于每个列彼此堆叠而不是并排。由于各种因素，这不能是硬编码值，因为发生这种情况的时间可能会因情况而异。

Answer 1

这是一个经典的 stacked to horizontal 引导布局。
您只需要使用响应式 .col-* 类。
请记住，BS 使用“移动优先”方案，因此以.col-12 开头，以确保在最小屏幕上全宽。然后为每个特定断点上方的宽度添加适当的 col 类，即.col-md-2 为中等及以上宽度的 2/12。您可以将其与响应式 text alignment 类 .text-md-end 结合使用，以仅在介质上方右对齐。

另外，请注意，在下面的示例中，不需要嵌套多个 .row.gy-2s（除非您有其他要求），列将自动换行到 12 列处的新行，因此，我已经简化了您的标记。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row gy-2">
    <div class="col-12 col-md-2 text-md-end">
      <b>Title: </b>
    </div>
    <div class="col-12 col-md-10">
      Info that spans <br /> multiple lines
    </div>

    <div class="col-12 col-md-2 text-md-end">
      <b>Title 2: </b>
    </div>
    <div class="col-12 col-md-10">
      More info, that gives lots of details about somthing to the user
    </div>

    <div class="col-12 col-md-2 text-md-end">
      <b>Title 3: </b>
    </div>
    <div class="col-12 col-md-10">
      Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince.
    </div>
  </div>
</div>