Question

我希望在我的用户名和退出按钮以及我的登录和注册按钮之间添加一些间距。

我尝试过添加空格（没有做任何事情），我也尝试过使用列表项并插入一个空的段落标记。如何添加两个或三个水平空格？

 <ul class="nav navbar-nav navbar-right">
   <div style="margin-right: 10px; margin-left: 15px; margin-top: 15px; margin-bottom: 5px;"  class="container-fluid">
        {% if session.logged_in %}
         <a href="/dashboard/"> Welcome {{session['username']}}   </a>
         <a href="/logout/"><span class="glyphicon glyphicon-log-out"></span> Logout </a>
        {% else %}
        <a href="/login/"><span class="glyphicon glyphicon-log-in"></span> Login </a>
        <a href="/register/"><span class="glyphicon glyphicon-pencil"></span> Sign up</a>
        {% endif %}
   </div>
 </ul>

这些项目包含在

中

 <div id="navbar" class="collapse navbar-collapse">

以及左侧的其他链接。

这是我现在拥有的照片： Current

Answer 1

我认为您应该将display: inline-block;或display: block;应用于<a></a>元素，然后您可以设置边距。那应该做的工作。

或者您可以使用<div></div>作为其父标记，然后将边距应用于它们。就像那样：

<div class="sample"><a></a></div>

和CSS：

sample {display: 
  inline-block;
}

Answer 2

要达到预期效果，请使用以下两个选项

<强>选项1：

使用无序列表标签ul，li

 <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>

选项2：

使用现有代码

的填充标记填充

<div class="row nav navbar-nav navbar-right test">
  <a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
    </div>

CSS：

.test a{
  padding:10px;
}

为了比较，我在一个codepen中使用了两个选项，请检查一次

https://codepen.io/nagasai/pen/aypdXZ

导航栏上链接的Bootstrap间距

2 个答案: