Bootstrap 图标是蓝色而不是白色，并且在垂直方向上没有很好地定位 [英] Bootstrap icons are blue instead of white and not well positioned vertically

查看：18
本文介绍了Bootstrap 图标是蓝色而不是白色，并且在垂直方向上没有很好地定位的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想要两个彼此相邻的图标(它们之间几乎没有空间)，我将它们放在相同的 li 和相同的 div 中，但它们现在是蓝色的并且垂直位置不好，我应该使用什么引导程序类或自定义样式或其他任何东西使用(仅仅放入 2 里是不行的，图标之间有太多的空间)?:

@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><a class="navbar-brand" href="#">WebSiteName</a>

<div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li>

  • <a class="dropdown-toggle" data-toggle="dropdown" href="#">第 1 页 <span class="caret"></span></a><ul class="下拉菜单"><li><a href="#">第 1-1 页</a></li><li><a href="#">第 1-2 页</a></li><li><a href="#">第 1-3 页</a></li>
    • <li><a href="#">第 2 页</a></li><li><a href="#">第 3 页</a></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>

    </nav><div class="容器"><h3>可折叠导航栏</h3><p>在这个例子中，导航栏在小屏幕上是隐藏的，并由右上角的按钮代替(尝试重新调整此窗口的大小).<p>只有点击按钮时，才会显示导航栏.</p>

    解决方案

    你不应该在

  • 里面使用

    我为两个图标使用了两个不同的 li 并添加了两个类，请检查以下代码段:

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

    @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');.navbar-右 li{显示:内联块}.navbar-right li .left_padd {填充左:0;}.navbar-right li .right_padd {填充右:0;}

    <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><a class="navbar-brand" href="#">WebSiteName</a>

    <div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li class="active"><a href="#">首页</a></li>

  • <a class="dropdown-toggle" data-toggle="dropdown" href="#">第 1 页 <span class="caret"></span></a><ul class="下拉菜单"><li><a href="#">第 1-1 页</a></li><li><a href="#">第 1-2 页</a></li><li><a href="#">第 1-3 页</a></li>
    • <li><a href="#">第 2 页</a></li><li><a href="#">第 3 页</a></li><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>

    </nav><div class="容器"><h3>可折叠导航栏</h3><p>在这个例子中，导航栏在小屏幕上是隐藏的，并由右上角的按钮代替(尝试重新调整此窗口的大小).<p>只有点击按钮时，才会显示导航栏.</p>

    I want two icons next to each other (nearly no space between them), I put them in same li and same div but they are now blue and not well positionned vertically, what bootstrap class or custom style or anything else should I use (just putting in 2 li doesn't make it, the icons have too much space between them) ? :

    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>

    解决方案

    You should not use <div> inside <li> I have used two different li for both icons and added two classes, check below snippet:

    Note: You can adjust space between icons using by increasing padding

    @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;
}

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

    这篇关于Bootstrap 图标是蓝色而不是白色，并且在垂直方向上没有很好地定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆