導航欄上鍊接的引導間距

我正在尋找在我的用戶名和註銷按鈕以及我的登錄和註冊按鈕之間添加一點間距。導航欄上鍊接的引導間距

我試着添加空格（不做任何事情），我也嘗試使用列表項並插入一個空的段落標記。我能做些什麼來添加兩個或三個水平空間？

<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

來源

2017-08-05 Bryan Renolds

爲了達到預期的效果，請使用以下兩個選項

選項1：

使用無序列表標籤UL，李

<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

來源

2017-08-05 21:02:49

我想你應該申請一個display: inline-block;或display: block;到<a></a>元素，然後就可以設置頁邊距。這應該做的工作。

或者您可以使用<div></div>作爲其父標記，然後將邊距應用於它們。就這樣：

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

和CSS：

sample {display: 
    inline-block; 
}

來源

2017-08-05 20:45:55

導航欄上鍊接的引導間距

回答

相關問題