html - Bootstrap 导航栏没有响应

Question

我已经编写了一个 Bootstrap 导航栏，但是当我试图测试它的响应能力时，它并没有像它应该的那样创建小汉堡包图标......

我的页面有一个固定宽度的外部容器，当然还有一个固定顶部导航栏的内部容器。我试过使用容器，但它根本没有使导航栏响应，所以我一定是遗漏了什么，或者某些代码与响应式导航栏冲突？？

仅供引用:此处的 flex 代码似乎无法正常工作:/

谢谢大家

body {
  padding-top: 102px;
  background-color: #4d4d4d;
}
.container {
  width: 1530px;
  margin: 0 auto;
  margin-top: 0;
}
.navbar-brand {
  font-size: 50px;
  padding-top: 40px;
}
.custom-nav {
  min-height: 90px;
  font-size: 16px;
  color: #000 !important;
  background-color: #fff;
}
.dropdown-menu.user-list {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background-color: #F8F8F8;
  font-size: 15px;
}
ul.user-list li a {
  padding: 8px 30px;
}
ul.user-list li.divider {
  width: 200px;
  margin: 0 auto;
}
.avatar-img {
  padding: 0;
}
i.fa-angle-down {
  font-size: 25px;
  vertical-align: middle;
  font-weight: lighter;
}
/* My styles */

li.dropdown {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.user {
  margin-left: 50px;
  margin-right: 20px;
}
.label {
  border-radius: 100px;
  position: absolute;
  top: 25px;
  right: 2px;
  background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
  color: #777;
  padding: 30px 19px;
}
li.dropdown.bell {
  margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
  background-color: transparent;
}
#search-container {
  width: 300px;
}

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top custom-nav">
    <div class="container">
      <a class="navbar-brand navbar-left" href="#">PAGE NAME</a>

      <ul class="nav navbar-nav navbar-right">

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <!-- search bar added -->
        <li class="dropdown">
          <div class="input-group" id="search-container">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
            <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
          </div>
        </li>
        <li class="dropdown bell">
          <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
            <img src="http://placehold.it/50x50" class=" avatar-img img-square">
            <span class="label label-info">1</span>
          </a>
          <ul class="dropdown-menu bell" role="menu">
            <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a>
            </li>
            <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a>
            </li>
            <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
                            design</a>
            </li>
            <li class="divider"></li>
            <li><a href="#" class="text-center">View All</a>
            </li>
          </ul>
        </li>

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
            <!-- <span class="glyphicon glyphicon-menu-down"></span> -->
          </a>
          <ul id="menu" class="dropdown-menu user-list" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Another action</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>

    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p>dfsjfhskfs</p>


        <!-- <div class="chevron right">
			  <a href="#"></a>
			</div>

			<div style="height: 1em;">
			</div> -->




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

</div>

Answer 1

您有一些问题需要解决。

1. 您需要一个 navbar-header，其中包含将在小屏幕尺寸上显示的按钮。

   <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
   </div>
   

2. 您需要将菜单内容包装在 collapse div 中，在小屏幕尺寸上点击按钮时显示/隐藏。

   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   

3. 菜单中的 container 需要是 container-fluid。

    <nav class="navbar navbar-default navbar-fixed-top custom-nav">
        <div class="container-fluid">

1. 您需要让您的 container 类为小屏幕尺寸设置自动宽度，否则它会将汉堡包按钮推离屏幕。一些带有媒体查询的 CSS 可以实现这一点。

   @media(max-width: 767px) {
       .container {
           width: auto;
       }
   }
   

Bootstrap Navbar Documentation

body {
  padding-top: 102px;
  background-color: #4d4d4d;
}
.container {
  width: 1530px;
  margin: 0 auto;
  margin-top: 0;
}
@media(max-width: 767px) {
    .container {
        width: auto;
    }
}
.navbar-brand {
  font-size: 50px;
  padding-top: 40px;
}
.custom-nav {
  min-height: 90px;
  font-size: 16px;
  color: #000 !important;
  background-color: #fff;
}
.dropdown-menu.user-list {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background-color: #F8F8F8;
  font-size: 15px;
}
ul.user-list li a {
  padding: 8px 30px;
}
ul.user-list li.divider {
  width: 200px;
  margin: 0 auto;
}
.avatar-img {
  padding: 0;
}
i.fa-angle-down {
  font-size: 25px;
  vertical-align: middle;
  font-weight: lighter;
}
/* My styles */

li.dropdown {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.user {
  margin-left: 50px;
  margin-right: 20px;
}
.label {
  border-radius: 100px;
  position: absolute;
  top: 25px;
  right: 2px;
  background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
  color: #777;
  padding: 30px 19px;
}
li.dropdown.bell {
  margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
  background-color: transparent;
}
#search-container {
  width: 300px;
}

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">

            </ul>

            <ul class="nav navbar-nav navbar-right">
                <!-- search bar added -->
                <li class="dropdown">
                    <div class="input-group" id="search-container">
                        <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
                        <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
                    </div>
                </li>
                <li class="dropdown bell">
                    <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
                        <img src="http://placehold.it/50x50" class=" avatar-img img-square">
                        <span class="label label-info">1</span>
                    </a>
                    <ul class="dropdown-menu bell" role="menu">
                        <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a>
                        </li>
                        <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a>
                        </li>
                        <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
                        design</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#" class="text-center">View All</a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
                        <!-- <span class="glyphicon glyphicon-menu-down"></span> -->
                    </a>
                    <ul id="menu" class="dropdown-menu user-list" role="menu">
                        <li><a href="#">Action</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Another action</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>dfsjfhskfs</p>


            <!-- <div class="chevron right">
		  <a href="#"></a>
		</div>

		<div style="height: 1em;">
		</div> -->




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

</div>