引导响应容器（如列）

【问题标题】：Bootstrap responsive container (like columns)引导响应容器（如列）
【发布时间】：2021-11-01 22:42:05
【问题描述】：

这可能是一个有点愚蠢的问题 - 但我找不到我正在尝试做的事情的答案..

我正在尝试使整个容器 div 具有响应性（就像一行中的一列）。

例如我想产生这样的效果：

<div className="container">
   <div className="row justify-content-center">
      <div className="col-lg-6 cold-sm-10">
         ...
      </div>
   </div>
</div>

但在一行中......类似于：

<div className="container-lg-6 container-sm-10">
   ...
</div>

Bootstrap 中有什么东西可以实现这一点吗？

我尝试了 container-sm 的课程，但它们并没有像我想要的那样工作。

【问题讨论】：

标签： css twitter-bootstrap react-bootstrap bootstrap-5

【解决方案1】：

容器不是这样工作的。但是您可以通过将 .col-12.col-sm-10.col-lg-6 内的所有内容嵌套在 .row 内 .container-fluid 内来轻松实现布局

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="container-fluid p-0">
  <div class="row justify-content-center">
    <div class="col-12 col-sm-10 col-lg-6">


      <div class="row">
        <div class="col bg-primary">
          <h1>1</h1>
        </div>
        <div class="col bg-secondary">
          <h1>2</h1>
        </div>
        <div class="col bg-info">
          <h1>3</h1>
        </div>
      </div>
      <div class="row">
        <div class="col bg-info">
          <h1>4</h1>
        </div>
        <div class="col bg-primary">
          <h1>5</h1>
        </div>
      </div>


    </div>
  </div>
</div>

【讨论】：