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

Question

Hi I have a nav into a container and I want to center all elements:

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

More specifically I want all nav items to be aligned at the center of the container component

Answer 1

GJCode,

Here is an example of using Bootstrap classes and some HTML wrappers to center align the menu: 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>

The class container is for making the width a narrower than container-fluid . col-sm-6 is setting the width for the elements in the div, ie, the width of this div is going to be 6 columns max.

And finally, the col-sm-offset-3 is center align the div. col-sm-offset-3 simply adds a 3-column space before the div and 3-column space after the div. This totals to 6 columns.

Therefore, the total number of columns become 12 (6 from col-sm-6 and 6 from col-sm-offset-3 ).

Note : depending on the contents of your menu, you might need to adjust the values of col-sm-6 and col-sm-offset-3 but this should help you understand the concept itself.

Answer 2

Grid system Use mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

How it works Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

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