Question

我在基于bootstrap 3容器的导航栏中放置一些导航栏元素时遇到问题。

我附上了一张图片，该图片应显示我希望导航栏的显示方式：

我左侧的文字标识显示正常，右边的用户下拉菜单也很好。

我不确定如何在图片中显示该位置的搜索框中包含其图标以及“贝尔”的原因。我的代码中的悬停状态及其下拉列表不显示与导航栏的下边框齐平？

右边的用户下拉菜单也没有显示其高度与底部导航栏齐平，那里有1px差异......

如果有最少的代码可以修复此问题，以确保它在其他浏览器中兼容。

我代码中的铃铛图标只是一个占位符，因为我需要显示一个自定义铃铛图标的图像，但不确定如何在它顶部做一些小通知，但是是的：是的：/

无论如何，谢谢。

这是我的代码：

＆＃13;

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: 180px;
  margin: 0 auto;
}
.avatar-img {
  padding: 0;
}
.glyphicon-bell {
  font-size: 40px;
}
.user {
  margin-left: 30px;
  margin-right: 10px;
}
i.fa-angle-down {
  font-size: 25px;
  vertical-align: middle;
  font-weight: lighter;
}

＆＃13;

<html>
<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>

<body>
  
  <nav class="navbar navbar-default navbar-fixed-top custom-nav">
    <div class="container">
      <a class="navbar-brand navbar-left" href="#">BRAND LOGO TEXT HERE</a>

      <ul class="nav navbar-nav navbar-right">

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <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">32</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">Username here</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>dfsjfhsk</p>

      </div>
    </div>
  </div>
  
  </body>
</html>

＆＃13;

Answer 1

问题在于，包含铃铛图标的li标记dropdown以及另一个标记的高度不同会导致错位。所以，我使用flexbox来修复对齐（因为它是最简单的解决方案）。要在顶部获取红色通知，我使用位置作为绝对位置，并设置top: 12px（您可以根据自己的意愿使用顶部，左侧，右侧来定位通知）。只需在css文件的末尾添加以下样式即可查看更改

li.dropdown {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.user {
    margin-left: 11px;
    margin-right: 85px;
}
.label {
    position: absolute;
    top: 12px;
}
.navbar-default .navbar-nav>li>a {
    color: #777;
    padding: 10px 19px;
}
#search-container {
    width: 300px;
}

对于搜索栏，在包含铃声图标的li之前添加以下li标记

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

继承我的JSBin代码。看那里的输出。我希望它有所帮助！问你是否不懂任何事情。

Bootstrap导航栏没有正确定位一些元素

1 个答案: