创建动态 bootstrap 联系页面

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>

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

标题元素被强制为相同大小，因此它们看起来都是统一的，文本部分有最小尺寸，但它也可以变大以适合页面。

问题是标题元素有 bootstrap text-end class 来使标题右对齐。但是当满足最小尺寸限制时，两列将相互堆叠。发生这种情况时，标题元素需要左对齐，否则看起来很别扭。你可以在这张图片中明白我的意思。

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

Answer 1

这是一个 classic stacked to horizontal bootstrap 布局。
您只需要使用响应式 .col-* classes.
请记住 BS 使用“移动优先”方案，所以从 .col-12 开始以确保在最小的屏幕上全宽。然后在每个特定断点上方为您想要的宽度添加适当的 col class(es)，即 .col-md-2 为中等及以上宽度的 2/12。您可以将其与响应式 text alignment class .text-md-end 结合使用，以仅在中等上方右对齐。

此外，请注意，在下面的示例中，无需嵌套多个 .row.gy-2（除非您有其他要求），列将自动换行至 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>

创建动态 bootstrap 联系页面

Creating dynamic bootstrap contact page

css

dynamic

bootstrap-5