html - 导航栏上链接的 Bootstrap 间距

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

为了达到预期的结果，使用以下两个选项

选项 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:

使用现有代码对 anchor 标记使用填充

<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