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

网格系统借助十二列系统，五个默认响应层，Sass变量和mixins以及数十种预定义的类，使用移动优先的flexbox网格构建各种形状和尺寸的布局。

工作原理 Bootstrap的网格系统使用一系列容器，行和列来布局和对齐内容。它是使用flexbox构建的，具有完全的响应能力。下面是一个示例，并深入研究了网格如何组合在一起。

对flexbox还是陌生的？阅读此CSS Tricks flexbox指南，了解背景，术语，指南和代码段。

<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>

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

2 个答案: