在Bootstrap 4中创建三个居中网格

Question

我正试图模仿IG的导航栏。

我正尝试将所有元素居中放置：徽标，搜索栏和头像图标，并使它们在屏幕中央都具有空格，就像您在此处看到的那样：

但是，即使我使用了col-push，它也不会改变网格的行为：

 FCCmap fccmap = mesh.add_property_map<face_descriptor, faces_size_type> 
                 ("f:CC").first;
 faces_size_type num = PMP::connected_components(mesh,fccmap); 
 std::vector<Mesh> meshes(num);
 for(int i=0; i< num; ++i)
 {
   Filtered_graph ffg(mesh, i, fccmap);
   CGAL::copy_face_graph(ffg, meshes[i]);
 }

这里是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>

Answer 2

我猜导航根本就是行。因此，您无需再次添加它。也许我错了，但这对我有用：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.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">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="col-lg-12 col">
          <div class="row">
            <div class="col-lg-4 col">
            Here comes logo
            </div>
            <div class="col-lg-4 col">
              <input placeholder="Search">
            </div>
            <div class="col-lg-4 col text-right">
               <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>
          </div>
        </div>
    </nav>

Answer 3

您做错了。您应该在“行”下只有“ col-”类。 在此之间有一个按钮。

每行总共应该有12列。

因此，应为以下结构：

<div class="row">
  <div class="col-2">
    <div class="row">
      <div class="col-6">Logo</div>
      <div class="col-6">Text</div>
    </div>
  </div>
  <div class="col-8"><!--Empty Space--></div>
  <div class="col-2">
    <div class="row">
      <div class="col-4">icon1</div>
      <div class="col-4">icon2</div>
      <div class="col-4">icon3</div>
    </div>
  </div>
</div>

Answer 4

只需删除代码中不需要的行和容器。将移动折叠按钮移动到导航栏附近。我希望这个解决方案会有所帮助。

.body {
    width: 100%;
}

.white {
    color: #fff !important;
}

.no-space {
    padding: 0;
    margin: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <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">
        <a href="#" class="col-lg-4 navbar-brand white">LifeShot</a>
        <div class="col-lg-4">
            <input class="form-control" type="search" placeholder="Search" aria-label="Search" />
        </div>
        <div class="col-lg-4 text-md-right">
            <i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>
        </div>
    </div>
</nav>

Answer 5

您可以尝试以下更简单的方法：

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark justify-content-around">
  <a class="navbar-brand" href="#">LifeShot</a>
  <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 flex-grow-0" id="navbarNavDropdown">

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    </form>

    <ul class="navbar-nav">
      <li class="nav-item">
        <i class="fa fa-user-o fa-lg" aria-hidden="true" style="color: #fff;"></i>
      </li>
    </ul>
  </div>
</nav>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Answer 6

我稍微清除了您的代码。不要将NavBar放在容器中，只是放在body标签中。 然后，您可以更改导航栏中的容器宽度，以缩小导航栏品牌和搜索框之间的空间。

ApplicationController

现在，您可以使用固定引导程序“宽度更改类”，例如w-25，w-50，w-75（25％，50％，75％宽度）等，也可以编写自己的宽度类喜欢：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<div class="container w-50">
    <a class="navbar-brand white">LifeShot</a>
    <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">

       <form class="form-inline my-2 my-md-0 ml-auto">
        <input
          class="form-control mr-sm-2"
          type="search"
          placeholder="Search"
          aria-label="Search"
        />    
        </form>
        <i class="fa fa-user-o fa-lg white" aria-hidden="true"></i>

    </div>
</div>
</nav>

现在只需将custom-w-80替换为w-50。