使用 Bootstrap 5 的最小宽度类是什么？答案

【问题标题】：What is the class for min width using Bootstrap 5?使用 Bootstrap 5 的最小宽度类是什么？
【发布时间】：2020-11-18 22:54:55
【问题描述】：

我查看了 Bootstrap 5 的文档，但似乎找不到使用像素的最小宽度类？有吗？

https://v5.getbootstrap.com/docs/5.0/utilities/sizing/

【问题讨论】：

没有这样的类。您将使用自定义 CSS 来实现这一点。

标签： bootstrap-5

【解决方案1】：

Bootstrap CSS 网格布局在设置响应式断点方面完成了繁重的工作。
每个视图/页面/前端元素可以分为12个部分。并且您可以选择一个容器从 12 个垂直列中占用多少空间。
Bootstrap 5 预定义了 6 个断点，语法如下

    col-xs-{number-between-1-to-12}  width <= 540px
    col-sm-{number-between-1-to-12}  max-width = 540px
    col-md-{number-between-1-to-12}  max-width = 720px
    col-lg-{number-between-1-to-12}  max-width = 960px
    col-xl-{number-between-1-to-12}  max-width = 1140px
    col-xxl-{number-between-1-to-12} width <= 1400px

示例 1：您得到一个带有 2 个子 div 的父 div，这些子 div 将在所有屏幕尺寸内占据相等的分割空间

<div id="i-am-a-parent-div"> 
    
   <div class="col-6"> This takes First Half the Space inside parent element</div>

   <div class="col-6"> This takes Second Half the Space inside parent element</div>

</div>

示例 2：子 div 将共享 6/12 空间，直到 max-width=540，但随后它们将空间占用分别更改为 4/12 和 8/12。注意：我为每个子 div 添加了两个单独的类，您可以为每个断点添加任意数量的类。

<div>
    <div class="col-sm-6 col-md-4"> This takes First Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take One-Thirds (4/12) the space between 540px & 768px </div>
    
    <div class="col-sm-6 col-md-8"> This takes Second Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take Two-Thirds (8/12) the space between 540px & 768px </div>
</div>

如果这不能满足你需要做的事情，那么他们的断点还有更多的自定义选项，请随时结帐：https://v5.getbootstrap.com/docs/5.0/layout/grid/#grid-options

如果这对你有帮助，请告诉我！

【讨论】：