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/

＆＃13;

li {
  margin: 10px 5px;
}

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

Answer 2

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

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

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

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

快乐地帮助!!

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

3 个答案: