html - 带有图标的可折叠 Bootstrap 导航栏

Question

我正在尝试为中小屏幕设备创建一个可折叠的导航栏。

我已经在 bootstrap 的文档页面上看到了这个实现:

在 Bootstrap 文档页面上，无论何时调整屏幕大小时，它都会完美对齐所有内容。

但是在我的例子中:https://jsfiddle.net/u3cdbg09/

我似乎无法让汉堡包图标与下拉菜单图标正确对齐。

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 no-space">
      <nav class="navbar navbar-dark bg-dark justify-content-around">
        <div class="container">
          <a class="navbar-brand" href="#">LOGO</a>

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

          <div class="dropdown">

          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" >
          <i
            class="fa fa-user-o fa-lg"
            aria-hidden="true"
            style="color: #fff;"
          ></i>
          </button>

          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">My Account</a>
              <a class="dropdown-item" href="#">My Profile</a>
              <a class="dropdown-item" href="#">Logout</a>
            </div>

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

知道如何让它在中小屏幕上可折叠吗？

提前致谢!

Answer 1

使用navbar-collapse

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">LOGO</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>
</nav>

body {
  background-color: #fff;
  font-family: "Poppins";
}

.white {
  color: #fff !important;
}

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

.border {
  border: 4px solid red !important;
}

.card-margin {
  margin: 35px 0px;
}

.uname {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}

.avatar-small {
  border-radius: 100%;
  border: 2px solid #ed4956;
  padding: 2px;
}

.like-indicator {
  height: 25px;
}

.like {
  font-size: 21px;
  vertical-align: middle;
  color: #212529;
}

.like-counter {
  font-size: 14px;
  font-weight: bold;
  margin-left: 3px;
  vertical-align: middle;
}

.desc {
  margin: 10px 0px;
  font-size: 14px;
}

.timeframe {
  text-transform: uppercase;
  font-size: 10px;
  color: #999;
  margin-left: 3px;
  margin-bottom: 3px;
}

a.view-more {
  text-transform: uppercase;
  font-size: 10px;
  margin-left: 4px;
  margin-bottom: 17px;
  color: #999;
  text-decoration: underline;
}

.card-body {
  background-color: #fff;
}

.profile {
  margin-top: 35px;
  margin-left: 92px;
}

.prof-container {
  width: 124px;
  height: 124px;
  margin: 26px auto 10px auto;
  display: block;
}

.img-prof {
  border-radius: 100%;
  border: 2px solid #dedede;
  padding: 2px;
}

.name {
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  margin-bottom: 2px;
}

.uname-prof {
  font-size: 12px;
  color: #939393;
  text-align: center;
  font-weight: bold;
}

.prof-text {
  text-align: center;
  font-size: 13px;
  color: #5e5e5e;
  padding: 0px 10px;
}

a.load {
  text-transform: uppercase;
  font-size: 14px;
  color: #999 !important;
  text-align: center !important;
  margin: 0 auto 30px auto;
  display: block;
}

button#dropdownMenuButton,
button#dropdownMenuButton:hover,
button#dropdownMenuButton:active {
  background-color: #343a40 !important;
  border: none;
  outline: none;
}

footer {
  padding: 18px 0px 3px 0px;
  background: #343a40;
}

footer p {
  color: #dedede;
  text-align: center;
  font-size: 13px;
}

input.form-control.mr-sm-2.search {
  outline: none;
  border: none;
  font-size: 12px;
  border-radius: 2px;
  padding: 0px 10px 0px 30px;
}

.search-span {
  float: left;
  margin-right: -25px;
  margin-top: -2px;
  position: relative;
  z-index: 2;
  color: #000;
  font-size: 12px;
}

.dropdown-menu {
  font-size: 13px;
}

.bd-image {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 2px;
}

.bpadding {
  margin: 40px 30px;
}

.profile-box {
  background: #f7f7f7;
  border: 1px solid #dee2e6;
  border-radius: 2px;
  margin: 20px;
  padding: 5px;
}

.desc {
  margin: 10px 0px;
  font-size: 15px;
}

.boundary {
  margin: 40px 0px;
}

.x-lmargin {
  margin-left: -7px;
}

.x-tmargin {
  margin-top: 10px;
}

a.dropdown-item:hover,
a.dropdown-item:active {
  background-color: #ed4956;
  color: #fff;
}

.sign-box {
  background: #f7f7f7;
  border: 1px solid #dee2e6;
  border-radius: 2px;
  padding: 20px;
  margin: 24vh;
}

.fixvh {
  margin: 10vh;
}

.sign-logo {
  display: block;
  margin: 15px auto;
}

.sign-box h3 {
  font-size: 17px;
  text-align: center;
  margin: 15px 0px;
}

.sign-box p {
  font-size: 12px;
  margin: 10px auto !important;
  text-align: center !important;
}

.sign-box a {
  color: #c53541;
  font-weight: bold;
}

.sign-box input,
.sign-box textarea {
  font-size: 13px;
  resize: none;
}

.sign-box input:focus,
.form-control:focus {
  border-color: #ed4956;
  outline: #ed4956;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.sign-box button {
  width: 100%;
  font-size: 15px;
  background: #ed4956;
  outline: none;
  border: none;
  font-weight: 500;
}

.sign-box button:hover,
.sign-box button:hover {
  background: #c53541;
}

input.file-center {
  margin: 0 auto !important;
  display: block;
}

@media only screen and (max-width: 992px) {
  .profile {
    display: none;
  }

  .bpadding {
    margin: 0px;
  }
  .boundary {
    margin: 0px;
  }

  .bd-image {
    margin: 15px 0px;
  }

  .name,
  .uname-prof,
  .prof-text {
    text-align: center !important;
  }

  .profile-box {
    padding: 20px 10px 10px 0px;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="#">LOGO</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">
             <nav class="navbar navbar-dark bg-dark w-100">
               <div class="container-fluid">

                 <form class="form-inline m-auto">
                   <span class="fa fa-search search-span"></span>
                   <input
                          class="form-control mr-sm-2 search"
                          type="search"
                          placeholder="Search.."
                          aria-label="Search"
                          />
                 </form>

                 <div class="dropdown">

                   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" >
                     <i
                        class="fa fa-user-o fa-lg"
                        aria-hidden="true"
                        style="color: #fff;"
                        ></i>
                   </button>

                   <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                     <a class="dropdown-item" href="#">My Account</a>
                     <a class="dropdown-item" href="#">My Profile</a>
                     <a class="dropdown-item" href="#">Logout</a>
                   </div>

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