代码之家 › 专栏 › 技术社区 › Major Productions

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

bootstrap-4 css html

1

Major Productions · 技术社区 · 7 年前

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

其结果如下:

那是 导航栏 在底部增长,毫无疑问,这是我添加的利润的结果(填充也有同样的作用)。理想情况下,社交媒体图标将与搜索栏位于同一条线上,登录和注册链接位于搜索栏顶部,与当前一样。

以下是与布局草图的比较:

5 回复 | 直到 7 年前

1

Vikas Jadhav 7 年前

要实现此功能,请使用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>

2

1

Nandita Sharma 7 年前

移除 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结构。这种结构更具响应性,根据引导标准,图标将自动与搜索栏对齐,无需使用边距和填充。

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

3

1

Irfandy Jip 7 年前

由于问题已经更新,我的旧答案已经不够了。实际上,@Nandita已经对您的答案做了一点回答,但是因为您喜欢我的JSFIDLE,所以我再次修改了它,使它看起来更好。

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

4

0

dycodingcoda 7 年前

为了实现更像示例的效果,我认为您应该删除nav item.中的padding,并在nav类中添加padding

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

对于第二个问题,只需添加另一个div和nav item类

5

0

Saurabh Mistry 7 年前

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