引导固定导航栏链接与品牌保持同一行

在开始之前，我搜索了最近几个小时，发现了几个回复，但没有解决此问题。引导固定导航栏链接与品牌保持同一行

我只有一个链接，我有一个固定的顶部导航栏。我希望链接与移动/小屏幕中的品牌保持一致。

现在移动（参考下图）：

我试图浮动是正确的，看看能否帮助，但事实并非如此。

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

引导固定导航栏链接与品牌保持同一行

回答

相关问题