如何在容器 div 引导程序中对齐内容 4.

Question

嗨，我有一个容器的导航，我想将所有元素居中：

<!-- Main container -->
<div class="container align-content-center">
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mx-auto">
<!-- Link to home page -->
<a class="navbar-brand" href="#">HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Search bar -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</nav>
</div>

更具体地说，我希望所有导航项都对齐在容器组件的中心

Answer 1

GJCode，

下面是使用 Bootstrap 类和一些 HTML 包装器居中对齐菜单的示例：https://jsfiddle.net/learnwithclyde/sm2bz4kL/

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
<!-- Menu elements like brand and navigation --> 
</div>
</div>

类container用于使宽度比container-fluid窄。col-sm-6正在设置div 中元素的宽度，即此div 的宽度最多为 6 列。

最后，col-sm-offset-3是div 居中对齐。col-sm-offset-3只是在div 之前添加一个 3 列空间，在div 之后添加一个 3 列空间。总共有 6 列。

因此，列总数变为 12(col-sm-6为 6 列，col-sm-offset-3列数为 6 列)。

注意：根据菜单的内容，您可能需要调整col-sm-6和col-sm-offset-3的值，但这应该可以帮助您理解概念本身。

Answer 2

网格系统 使用移动优先的 flexbox 网格来构建各种形状和大小的布局，这要归功于十二列系统、五个默认响应层、Sass 变量和 mixins 以及数十个预定义类。

工作原理 Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。它采用弹性框构建，完全响应。下面是一个示例，并深入探讨了网格是如何组合在一起的。

不熟悉或不熟悉弹性框？阅读此 CSS Tricks 弹性框指南，了解背景、术语、指南和代码片段。

<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>