如何左对齐容器（Bootstrap 5）

Question

我有一个容器（网格，Bootstrap 5），我想将其在我的页面上左对齐。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col border border-dark m-2">
      Col1
    </div>
    <div class="col border border-dark m-2">
      Col2
    </div>
    <div class="col border border-dark m-2">
      Col3
    </div>
  </div>
</div>

我希望页面上的所有列和行都左对齐。我可以在容器 div 上使用position-absolute top-0 start-0，但根据文档，页面将不再响应。如何解决这个问题？

Answer 1

如果您查看.container类的 CSS，您会发现它的左右边距以auto对齐。这会将内容集中在页面上。从技术上讲，您的行/列在容器中左对齐。如果您希望容器真正左对齐，请使用以下内容覆盖 CSS

.container {
  margin-left: 0!important;
  margin-right: 0!important;
}