Bootstrap图标为蓝色而不是白色，垂直位置不正确

Question

我想要彼此相邻的两个图标（它们之间几乎没有空格），我把它们放在相同的li和相同的div中但它们现在是蓝色的并且没有很好地垂直定位，我应该使用什么类型的引导类或自定义样式或其他任何东西使用（只是放入2 li不成功，图标之间的空间太大）？ ：

https://www.w3schools.com/code/tryit.asp?filename=FD6NR1HEOO3W

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <div class="btn-group">
            <a href="#"><span class="glyphicon glyphicon-user"></span></a>
            <a href="#"><span class="glyphicon glyphicon-log-in"></span></a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
    <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

Answer 1

您不应在<div>内使用<li> 我为这两个图标使用了两个不同的li并添加了两个类，请查看下面的代码段：

注意：您可以通过增加填充来调整图标之间的空间

＆＃13;

＆＃13;

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.navbar-right li{
  display:inline-block
}
.navbar-right li .left_padd {
  padding-left:0;
}
.navbar-right li .right_padd {
  padding-right:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          
            <a class="right_padd" href="#"><span class="glyphicon glyphicon-user"></span></a><li>
            <li><a class="left_padd" href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>
         
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
    <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是你有<div class="btn-group">并且你不需要它，你也只有一个<li>里面有两个按钮。

这是你的代码：

<ul class="nav navbar-nav navbar-right">
    <li>
      <div class="btn-group">
        <a href="#"><span class="glyphicon glyphicon-user"></span></a>
        <a href="#"><span class="glyphicon glyphicon-log-in"></span></a>
      </div>
    </li>
</ul>

并且应该是这样的：每个按钮只有一个<li>，没有btn-group div：

<ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>
</ul>

以下是一个示例：https://www.w3schools.com/code/tryit.asp?filename=FD6OLHFYBBWZ

Answer 3

将颜色：白色和填充顶部应用于包含.glyphicon的跨度。这应该有所帮助。

Answer 4

更改包含glyphicons的nabvar的标记：

<ul class="nav navbar-nav navbar-right">
  <li>
    <div class="btn-group">
      <a href="#"><span class="glyphicon glyphicon-user"></span></a>
      <a href="#"><span class="glyphicon glyphicon-log-in"></span></a>
    </div>
  </li>
</ul>

为：

<ul class="nav navbar-nav navbar-right">
  <li>
    <a href="#"><span class="glyphicon glyphicon-user"></span></a>
  </li>
  <li>
    <a href="#"><span class="glyphicon glyphicon-log-in"></span></a>
  </li>
</ul>

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span></a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
    <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

或者，根本不要创建第二个导航栏。

变化：

<ul class="nav navbar-nav navbar-right">
  <li>
    <div class="btn-group">
      <a href="#"><span class="glyphicon glyphicon-user"></span></a>
      <a href="#"><span class="glyphicon glyphicon-log-in"></span></a>
    </div>
  </li>
</ul>

为：

<p class="navbar-text navbar-right">
  <a class="navbar-link" href="#"><span class="glyphicon glyphicon-user"></span></a>
  <a class="navbar-link" href="#"><span class="glyphicon glyphicon-log-in"></span></a>
</p>

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <p class="navbar-text navbar-right">
        <a class="navbar-link" href="#"><span class="glyphicon glyphicon-user"></span></a>
        <a class="navbar-link" href="#"><span class="glyphicon glyphicon-log-in"></span></a>
      </p>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
    <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>