Bootstrap Fixed Navbarブランドと同じ行に留まるためのリンク

Question

開始する前に、ここ数時間は検索しましたが、いくつかの回答が見つかりましたが、この問題は修正されていませんでした。

私は1つのリンクしか持たず、トップナビゲーションバーを持っています。私はリンクがモバイル/小型スクリーンのブランドと同じライン上にとどまるようにしたい。モバイル（下記参考画像）上の今

：

私はそれが助け場合は、右見て、それを浮動試してみましたが、それはしませんでした。

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

Answer 1

あなただけ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>