引導固定導航欄鏈接與品牌保持同一行

在開始之前，我搜索了最近幾個小時，發現了幾個回覆，但沒有解決此問題。引導固定導航欄鏈接與品牌保持同一行

我只有一個鏈接，我有一個固定的頂部導航欄。我希望鏈接與移動/小屏幕中的品牌保持一致。

現在移動（參考下圖）：

我試圖浮動是正確的，看看能否幫助，但事實並非如此。

HTML：

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Brand</a></div> 
     <div class="collapse navbar-collapse" id="topFixedNavbar1"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">1 Link Only<span class="sr-only">(current)</span></a></li> 
    </ul> 
    </div> 
    </div> 
</nav>

CSS：

.navbar-collapse.collapse { 
    display: inline-block!important; 
} 

.navbar-nav>li, .navbar-nav { 
    float: left !important; 
}

來源

2017-10-12 Phil

嗨菲爾，你能給在小提琴的代碼或類似的其中具有問題頁面！ –

你只需要刪除collapse navbar-collapse類和使用自定義類。您可以將其命名爲custom-navbar-nav。最後，添加顯示在這裏的CSS。如果您確實希望自己的鏈接位於頂部，則需要使用媒體查詢。

.navbar-header { 
 
    display: inline-block; 
 
} 
 

 
.custom-navbar-nav { 
 
    display: inline-block; 
 
    float: right; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
    <a class="navbar-brand" href="#">Brand</a></div> 
 
     <div class="custom-navbar-nav"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">1 Link Only<span class="sr-only">(current)</span></a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2017-10-12 18:32:02

引導固定導航欄鏈接與品牌保持同一行

回答

相關問題