Bootstrap 4-将两层链接对齐到导航栏的顶部和底部

Question

我有一个链接集合，我想与我的navbar的顶部和底部对齐。具体来说，这种安排：

在下面的答案中使用Irfandy Jip的代码，并且我自己继续研究之后，我想出了以下代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
    <a class="navbar-brand" href="{{ path('_home') }}">
        <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
        <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
    </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>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
            <div class="nav-item mb-lg-5">
                <div class="btn-group">
                    <button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href="">Login</a>
                    </button>
                    <button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href="">Sign Up</a>
                    </button>
                </div>
            </div>

            <div class="nav-item mb-lg-5">
                <div class="btn-group btn-group-lg">
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="far fa-envelope"></i></a>
                    </button>
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="fab fa-facebook-square"></i></a>
                    </button>
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
                    </button>
                </div>
            </div>

            <a class="nav-link d-lg-none" href="">Login</a>
            <a class="nav-link d-lg-none" href="">Sign Up</a>
        </div>

        <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}">
            <div class="input-group">
                <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
                </div>
            </div>
        </form>
    </div>
</nav> <!-- end nav -->

结果如下：

确实接近我想要的，除了整个navbar在底部的增长方式，毫无疑问，我添加的边距的结果（填充做同样的事情）。理想情况下，社交媒体图标应与搜索栏位于同一“行”上，并与当前位置一样，在其顶部具有“登录”和“注册”链接。

以下是该布局的草稿的比较：

还有什么我可以做的，以使右侧的链接看起来更像最后一张图片吗？

Answer 1

更新日期为2018年11月27日，由于问题已更新，我的旧答案已不再足够。实际上，@ Nandita已经回答了您一些答案，但是由于您喜欢我的JSFiddle，因此我再次对其进行了修改，因此看起来更好。

您只需要自己设置“搜索栏”的宽度即可。

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange d-flex justify-content-between" style="border-bottom-width: 4px !important;">
  <!-- Brand Logo -->
  <a class="navbar-brand" href="{{ path('_home') }}">
    <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
    <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
  </a>
  <!-- Toggler -->
  <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>
  <!-- What's inside Toggler -->
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <!-- Search Bar -->
    <div class="ml-lg-auto d-none d-lg-inline" style="width:610px">
      <form class="w-100 m-auto" action="{{ path('_store_search_results') }}">
        <div class="input-group">
          <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
          <div class="input-group-append">
            <button class="btn btn-burnt-orange" type="button"><i class="far fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <!-- The Right Items -->
    <div class="navbar-nav color-dark-blue ml-lg-auto">
      <div class="nav-item">
        <!-- Login and Sign Up Button Group -->
        <div class="btn-group btn-group-sm d-none d-lg-inline-flex">
          <button class="btn btn-link border-right p-0 m-0 d-none d-lg-inline">
              <a class="nav-link py-0" href="">Login</a>  
            </button>
          <button class="btn btn-link border-left p-0 m-0 d-none d-lg-inline">
              <a class="nav-link py-0" href="">Sign Up</a>  
            </button>
        </div>
        <!-- Social Media Button Group -->
        <div class="btn-group-lg d-flex justify-content-around align-content-center my-lg-1 mt-lg-2">
          <button class="btn btn-link p-0 m-0">
              <i class="far fa-envelope d-none d-lg-inline"></i>
            </button>
          <button class="btn btn-link p-0 m-0">
              <i class="fab fa-facebook d-none d-lg-inline"></i>
            </button>
          <button class="btn btn-link p-0 m-0">
              <i class="fab fa-twitter d-none d-lg-inline"></i>
            </button>
        </div>
        <a class="nav-link d-lg-none" href="">Login</a>
        <a class="nav-link d-lg-none" href="">Sign Up</a>

        <!-- Try pulling the panel to the left                                                           -->
      </div>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

链接到JSFiddle来玩https://jsfiddle.net/irfandyjip89/y9fksubx/4/

Answer 2

从nav-item中删除mb-lg-5类

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://use.fontawesome.com/eed659c9d4.js"></script>
</head>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
  <a class="navbar-brand" href="{{ path('_home') }}">
    <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
    <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
  </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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
      <div class="nav-item">
        <div class="btn-group">
          <button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Login</a>
                </button>
          <button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Sign Up</a>
                </button>
        </div>
      </div>

      <div class="nav-item">
        <div class="btn-group btn-group-lg">
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fa fa-envelope"></i></a>
                </button>
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fa fa-facebook-square"></i></a>
                </button>
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fa fa-twitter"></i></a>
                </button>
        </div>
      </div>

      <a class="nav-link d-lg-none" href="">Login</a>
      <a class="nav-link d-lg-none" href="">Sign Up</a>
    </div>

    <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}">
      <div class="input-group">
        <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
        </div>
      </div>
    </form>
  </div>
</nav>
<!-- end nav -->

另外，如果您灵活地更改HTML结构，我还将添加HTML的替代结构。这种结构的响应速度更快，按照bootstrap的标准，图标将自动与搜索栏对齐，而无需使用边距和填充。

@media(min-width:992px) {
  .login-btn {
    border-right: 1px solid #aaa;
  }
  form.search-form {
    width: 50% !important;
  }
}

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://use.fontawesome.com/eed659c9d4.js"></script>
</head>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange">
  <a class="navbar-brand" href="{{ path('_home') }}">
    <img src="https://picsum.photos/60/60" class="d-lg-none">
    <img src="https://picsum.photos/60/60" class="d-none d-lg-block">
  </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>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">

    <div class="d-flex flex-column w-100">
      <ul class="navbar-nav ml-lg-auto mt-2 mt-lg-0 align-self-start">
        <li class="nav-item active login-btn ">
          <a class="nav-link" href="">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="">Sign Up</a>
        </li>
      </ul>
      <div class="d-flex w-100 align-items-center">
        <form class="search-form form-inline my-2 my-lg-0 mx-lg-auto d-inline w-100" action="{{ path('_store_search_results') }}">
          <div class="input-group">
            <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
            </div>
          </div>
        </form>
        <div class="btn-group btn-group-lg">
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
        <a class="nav-link" href=""><i class="fa fa-envelope"></i></a>
      </button>
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
        <a class="nav-link" href=""><i class="fa fa-facebook-square"></i></a>
      </button>
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
        <a class="nav-link" href=""><i class="fa fa-twitter"></i></a>
      </button>
        </div>
      </div>

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

Answer 3

要使用CSS flextbox和align-items: flex-end;

这是更新的代码段：

form.form-inline {
  display: flex!important;
  width: 100%!important;
  align-items: flex-end;
}

.form-inline .input-group,
.form-inline .nav-item {
  width: 33.33%!important;
}

.navbar-nav {
  position: absolute;
  right: 20px;
  top: 0;
}

.nav-item .btn-group {
  float: right;
}

.nav-link {
  padding: 0 1rem!important;
}

@media only screen and (max-width: 991px) {
  .navbar-nav {
    position: inherit;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange p-3" style="border-bottom-width: 4px !important;">


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

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
      <div class="nav-item">
        <div class="btn-group">
          <button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Login</a>
                </button>
          <button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Sign Up</a>
                </button>
        </div>
      </div>
      <a class="nav-link d-lg-none" href="">Login</a>
      <a class="nav-link d-lg-none" href="">Sign Up</a>
    </div>

    <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}">
      <div class="nav-item">
        <a class="navbar-brand" href="{{ path('_home') }}">
          <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
          <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
        </a>
      </div>
      <div class="input-group">
        <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
        </div>
      </div>
      <div class="nav-item">
        <div class="btn-group btn-group-lg">
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fa fa-envelope"></i></a>
                </button>
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fa fa-facebook-square"></i></a>
                </button>
          <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fa fa-twitter"></i></a>
                </button>
        </div>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 4

要实现类似于示例的效果，我认为您应该只删除nav-item中的填充，然后在nav类中添加填充

<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange p-3" style="border-bottom-width: 4px !important;">
<a class="navbar-brand" href="{{ path('_home') }}">
    <img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
    <img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
</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>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
        <div class="nav-item">
            <div class="btn-group">
                <button class="btn btn-link border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Login</a>
                </button>
                <button class="btn btn-link border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href="">Sign Up</a>
                </button>
            </div>
        </div>

        <div class="nav-item">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="far fa-envelope"></i></a>
                </button>
                <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fab fa-facebook-square"></i></a>
                </button>
                <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                    <a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
                </button>
            </div>
        </div>

        <a class="nav-link d-lg-none" href="">Login</a>
        <a class="nav-link d-lg-none" href="">Sign Up</a>
    </div>

    <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="{{ path('_store_search_results') }}">
        <div class="input-group">
            <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
            <div class="input-group-append">
                <button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
            </div>
        </div>
    </form>
</div>

对于第二个问题，只需添加另一个带有nav-item类的div

Answer 5

这是您想要的，以全屏方式查看输出：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
    <a class="navbar-brand pt-lg-5 ml-lg-3" href="#">
        <img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="40" width="120" class="d-lg-none">
        <img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="40" width="120"  class="d-none d-lg-block">
    </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>

    <div class="collapse navbar-collapse mr-lg-3" id="navbarSupportedContent">
        <div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center order-lg-2">
            <div class="nav-item mb-lg-0">
                <div class="btn-group">
                    <button class="btn btn-link  border-dark-blue border-right border-top-0 border-left-0 border-bottom-0 p-0 m-0 d-none d-lg-inline" style="line-height:2px;">
                        <a class="nav-link" href="">Login</a>
                    </button>
                    <button class="btn btn-link  border-dark-blue border-left border-top-0 border-right-0 border-bottom-0 p-0 m-0 d-none d-lg-inline" style="line-height:2px;">
                        <a class="nav-link" href="">Sign Up</a>
                    </button>
                </div>
            </div>

            <div class="nav-item mt-lg-0 pt-lg-4">
                <div class="btn-group btn-group-lg">
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="far fa-envelope"></i></a>
                    </button>
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="fab fa-facebook-square"></i></a>
                    </button>
                    <button class="btn btn-link p-0 m-0 d-none d-lg-inline">
                        <a class="nav-link" href=""><i class="fab fa-twitter"></i></a>
                    </button>
                </div>
            </div>

            <a class="nav-link d-lg-none" href="">Login</a>
            <a class="nav-link d-lg-none" href="">Sign Up</a>
        </div>

        <form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-inline w-50 order-lg-1" action="">
            <div class="input-group">
                <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-warning my-2 my-sm-0" type="button"><i class="fas fa-search"></i></button>
                </div>
            </div>
        </form>
    </div>
</nav>