html - 在导航栏中，glyphicon 显示不正确(Bootstrap)

Question

我正在尝试使用 bootstrap 创建一个导航栏。但是导航栏中的主页图标显示不正确。它不在中间并且与其他列表不平行。请帮我解决这个问题。 问题: HTML:

<nav class="navbar navbar-inverse">
        <div class="container">
            <div class="row">
                <nav class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#" class="navbar-brand text-center">
                                <span class="glyphicon glyphicon-home"></span>
                            </a>
                        </li>
                        <li class="active">
                            <a href="#">Avro keyboard<br/>
                                <small>For windows</small>
                            </a>
                        </li>
                        <li>
                            <a href="#">iAvro<br/>
                                <small>For Mac OS X</small>
                            </a>
                        </li>
                        <li>
                            <a href="#">ibus-avro<br/>
                                <small>for linux</small>
                            </a>
                        </li>
                        <li>
                            <a href="#">Bangla Fonts<br/>
                                <small>Unicode/ANSI fonts</small>
                            </a>
                        </li>                       
                        <li>
                            <a href="#">Others<br/>
                                <small>Misc goodies</small>
                            </a>
                        </li>
                        <li>
                            <a href="#">Blog<br/>
                                <small>Stay updated!</small>
                            </a>
                        </li>
                        <li>
                            <a href="#">Help and support<br/>
                                <small>Forum & Help files</small>
                            </a>
                        </li>
                        <li>
                            <a href="#">Developers<br/>
                                <small>repositories and resources</small>
                            </a>
                        </li>                   
                    </ul>
                </nav>
            </div>
        </div>
    </nav>

CSS:

li {
    border-left: 1px solid;
    border-top: 0px;
    border-right: 1px solid;
    border-bottom: 0px;
    border-style: solid;
    border-color: #545454;
}
a {
    color: #FFFFFF !important;
}
small {
    color: #C5C6C1;
    font-style: italic;
}

Answer 1

您可以对以下 CSS 规则应用任何更改:

.navbar-inverse .navbar-brand .glyphicon{
    padding: 5px 0 0 15px;
}

.navbar {
  border-radius: 0;
}
.navbar-inverse .navbar-header .navbar-brand {
  color: #FFFFFF;
}
.navbar-inverse .navbar-nav > li:first-child {
  border: none;
  padding-top: 10px;
}
.navbar-inverse .navbar-nav {
  border-left: 1px solid #545454;
}
.navbar-inverse .navbar-nav > li {
  border: none;
  border-left: 1px solid #545454;
  border-right: 1px solid #545454;
}
.navbar-inverse ul.navbar-nav > li > a {
  color: #FFFFFF;
}
small {
  color: #C5C6C1;
  font-style: italic;
}
@media (min-width: 1200px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
  .navbar-inverse .navbar-header a {
    display: none;
  }
}
@media (max-width: 1200px) {
  .navbar-inverse .navbar-nav > li:first-child {
    display: none;
  }
  .navbar-inverse .navbar-nav {
    border: none;
  }
  .navbar-inverse .navbar-brand {
    line-height: 0;
  }
  .navbar-inverse .navbar-nav > li {
    border: none;
  }
  .navbar-inverse .navbar-header {
    float: none;
  }
  .navbar-inverse .navbar-left,
  .navbar-right {
    float: none !important;
  }
  .navbar-inverse .navbar-toggle {
    display: block;
  }
  .navbar-inverse .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-inverse .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-inverse .navbar-nav {
    float: none !important;
    margin-top: 7.5px;
  }
  .navbar-inverse .navbar-nav > li {
    float: none;
  }
  .navbar-inverse .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar-inverse .collapse.in {
    display: block !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- 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="#"> <span class="glyphicon glyphicon-home"></span>
      </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">
        <li> <a href="#"><span class="glyphicon glyphicon-home"></span>
                            </a>

        </li>
        <li class="active"> <a href="#">Avro keyboard<br/>
                                <small>For windows</small>
                            </a>

        </li>
        <li> <a href="#">iAvro<br/>
                                <small>For Mac OS X</small>
                            </a>

        </li>
        <li> <a href="#">ibus-avro<br/>
                                <small>for linux</small>
                            </a>

        </li>
        <li> <a href="#">Bangla Fonts<br/>
                                <small>Unicode/ANSI fonts</small>
                            </a>

        </li>
        <li> <a href="#">Others<br/>
                                <small>Misc goodies</small>
                            </a>

        </li>
        <li> <a href="#">Blog<br/>
                                <small>Stay updated!</small>
                            </a>

        </li>
        <li> <a href="#">Help and support<br/>
                                <small>Forum & Help files</small>
                            </a>

        </li>
        <li> <a href="#">Developers<br/>
                                <small>repositories and resources</small>
                            </a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>