Question

我正在尝试将自定义图标放在Bootstrap navbar中，同时将导航栏保持在50px的高度。即使我声明does not have a signature matching the target，在放置图标后，导航栏高度也会增加几个像素。单击导航栏中的链接并记下导航栏和下拉菜单之间的大约2px空间（由于图标的高度，导航栏在此示例中为52px）。

请参阅：http://jsfiddle.net/hj3h58gm/4/

我理解当前的行为，我只是不知道如何绕过它而不降低图标的高度，我不想这样做。

有什么建议吗？

图标用.navbar { height: 50px; }表示。

HTML

.el-ico

CSS

<body>
  <nav class="el-nav navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
              click this
              <span class="el-ico"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

Answer 1

你只需要在你的CSS上使用正确的选择器，并在调整身高时使用navbar的媒体查询，因为在768px以下你会产生不利影响（你的移动下拉背景看起来真的不可见了navbar设置为50px，默认为min-height：50px）。

@media (min-width: 768px) {
  .navbar.el-nav {
    height: 50px;
  }
}
.navbar .el-ico {
  display: inline-block;
  width: 30px;
  height: 18px;
  background-image: url(http://placehold.it/350x150/ff0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default el-nav navbar-fixed-top">
  <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" href="#">Brand</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">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="el-ico"></span>
          </a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

将Bootstrap navar限制为固定高度，同时允许导航栏菜单中的自定义图标

1 个答案: