CSS - 更改 Bootstrap 导航栏上按钮的位置

Question

我在 Bootstrap 导航栏上定位按钮时遇到问题。它们与网站标题不一致，而且距离太近。代码如下所示:

<nav class="navbar navbar-default">
<div class="container-fluid">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">WebSiteName</a>
  </div>
  <ul class="nav navbar-nav">
    <li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span>&nbsp;</button></li>
    <li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;</button></li>
  </ul>
</div>
</nav>

https://jsfiddle.net/mleontenko/poqbkxrt/

我需要将按钮与网站名称对齐，并在两个按钮之间添加一点空间。解决这个问题的 CSS 技巧将不胜感激。

Answer 1

这里有一个解决方案 https://jsfiddle.net/poqbkxrt/1/

li {
  margin: 10px 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <ul class="nav navbar-nav">
        <li><button type="button" class="btn btn-default" id="new-point"><span class="glyphicon glyphicon-plus"></span>&nbsp;</button></li>
        <li><button type="button" class="btn btn-default" id="feature-info"><span class="glyphicon glyphicon-info-sign"></span>&nbsp;</button></li>
      </ul>
    </div>
    </nav>

希望这对您有帮助。