html - 将导航栏图标与 bootstrap 3 中的文本对齐？

Question

我正在使用 bootstrap 3。这是我的 html:

如您所见，star 和 BookMarks 文本与其他导航栏不一致。 如何解决这个问题？ 这是我的代码

<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav navbar-right">


            <li>
              <a href="/mybookmarks/">
                <span class="glyphicon glyphicon-star" id="starry"></span>
                &nbsp;BookMarks
              </a>
            </li>

            <li>
              <a href="/search/create/">
                <span class="glyphicon glyphicon-plus"></span>
                &nbsp;New Search
              </a>
            </li>

            <li>
              <a href="/dashboard/">
                <span class="glyphicon glyphicon-th"></span>
                &nbsp;Searches
              </a>
            </li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-stats"></span>
                &nbsp;Reports <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="implement this">Raw Data</a>
                </li>
                <li>
                  <a href="implement this">Graphs</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="implement this">Email Report</a>
                </li>
              </ul>
            </li>

            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="glyphicon glyphicon-user"></span>
                &nbsp;
                        demo <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="/accounts/settings/">Account Settings</a>
                </li>
                <li>
                  <a href="/accounts/password/change/">Change Password</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="help">Help</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="/logout/">Log Out</a>
                </li>
              </ul>
            </li>

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

和一个用于星形字形的跨度元素的自定义CSS

#starry {
color: #B939A0;
font-size: 20px;
}

Answer 1

问题是由那个图标的字体大小增加引起的。

解决这个问题的一种方法是:

#starry {
  color: #B939A0;
  font-size: 20px;
  float: left;
  margin: -2px 3px 0 0;
}

float 将其从文档流中移除，允许文本重新对齐。然后边距重新定位图标。

Demo