引导行不居中项目答案

【问题标题】：Bootstrap row not centering items引导行不居中项目
【发布时间】：2022-02-05 00:49:03
【问题描述】：

我正在使用 Bootstrap 5 行属性来使我的网站具有响应性。但是，当我尝试将 2 个 div 彼此相邻添加时，它们似乎并没有在网页的中心对齐，相反，右侧有一个我无法摆脱的未使用的间隙。对于本节，我使用 class="container"。任何提示？代码如下。我还添加了一张我检查时外观的图像。

<h1> (SPH) </h1>
                <div class="row">
                    <div class="box col-lg-6">
                        <h3> Who We Are </h3>
                        <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
                    </div>
                    <div class="box col-lg-6">
                        <h3> What We Do </h3>
                        <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
                    </div>
                </div>

【问题讨论】：

可能你错过了 .container div 来自文档：Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
Bootstrap 5 或 4，你的标签是 4 而不是 5
将justify-content-center 作为类添加到父元素，例如容器或行本身。
我在 section 标签中有一个容器类。我添加了 justify-content-center 并且它起作用了。谢谢！

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

如 cmets 中所述。

您可以在页面顶部使用一个类，例如：container。

示例：

<div class= container justify-content-center> /your code here/ </div>

【讨论】：

【解决方案2】：

另一个答案有一些语义问题，所以我想我发布一个。本质上，您应该将 Bootstrap row 嵌套到容器中。然后你可以在行上添加justify-content-center，因为它默认有一个display: flex;。

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<div class="container">
<h1 class="text-center"> (SPH) </h1>
  <div class="row justify-content-center">
    <div class="box col-lg-6">
      <h3> Who We Are </h3>
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
    </div>
    <div class="box col-lg-6">
      <h3> What We Do </h3>
      <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
    </div>
  </div>
</div>

【讨论】：

很好的例子，也有效，我想我会坚持这个。但作为一个问题，我正在分段构建此页面，因此我在开始部分标记中添加了 class="container" ，但是我应该继续这样做还是像在您的示例中那样使用另一个 div ？
这是一个很好的问题，如果您使用 div 或带有container 的部分，它确实不会影响代码。但是，就我个人而言，我喜欢将wrappers 和containers 与div 一起使用，并且通常是类或id 我给出的部分描述了该部分的内容。例如，您可以将第一部分设为“家”，将第二部分设为“联系人”，对应的id's
@adrman47 你也可以看看一些CSS Naming Conventions 来帮助命名类，当其他语言开始参与时它尤其有用。