CSS - 更改引导导航栏上按钮的位置答案

【问题标题】：CSS - Change position of buttons on bootstrap navbarCSS - 更改引导导航栏上按钮的位置
【发布时间】：2018-05-03 19:51:02
【问题描述】：

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

<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 技巧将不胜感激。

【问题讨论】：

那个小提琴没有应用css，你试过什么？

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

默认情况下，.navbar 组件上的.nav 依赖于超链接进行导航。这些超链接具有由 Bootstrap 的 CSS 定义的 padding，以便与 .navbar-brand 相关的每个项目正确间隔。

由于您使用的是<button> 元素，因此您需要添加自己的 CSS，例如：

.navbar-nav .btn {
  margin-top: 8px;
}

【讨论】：

【解决方案3】：

这段代码对你有用！！

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

      </div>
     </div>
    </nav>

乐于助人！！

【讨论】：