html - 在 bootstrap 4 中创建三个居中网格

Question

我有时会尝试模仿 IG 的导航栏。

我试图将所有元素居中: Logo 、搜索栏和头像图标，并使它们在屏幕中央都有空间，就像您在这里看到的那样:

然而，即使我使用了 col-push，它也不会改变我的网格的行为:

<div class="container-fluid">
      <div class="row no-gutter">
        <div class="col-lg-12 no-space">
          <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="col-lg-4">
              <a class="navbar-brand white">LifeShot</a>
            </div>

            <button
              class="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarNavDropdown"
              aria-controls="navbarNavDropdown"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNavDropdown">
              <div class="col-lg-4">
                <input
                  class="form-control mr-sm-2"
                  type="search"
                  placeholder="Search"
                  aria-label="Search"
                />
              </div>

              <div class="col-lg-4">
                <i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>

这是 jsfiddle .

知道我在这里错过了什么吗？

Answer 1

      .body {
        width: 100%;
      }

      .white {
        color: #fff !important;
      }

      .no-space {
        padding: 0;
        margin: 0;
      }
      
     .align-center {
       text-align: center;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
      <div class="row no-gutter">
        <div class="col-lg-12 no-space">
          <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="col-lg-4 col-md-4 col-sm-4">
              <a class="navbar-brand white">LifeShot</a>
            </div>

            <button
              class="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarNavDropdown"
              aria-controls="navbarNavDropdown"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <div class="row no-gutter">
            
              <div class="col-lg-6 col-md-6 col-sm-6 align-center">
                <input
                  class="form-control mr-sm-2"
                  type="search"
                  placeholder="Search"
                  aria-label="Search"
                />
              </div>

              <div class="col-lg-6 col-md-6 col-sm-6 align-center">
                <i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
              </div>
              
            </div>
            </div>
          </nav>
        </div>
      </div>
    </div>