Bootstrap固定导航栏链接与Brand保持同一行

Question

在开始之前，我搜索了最近几个小时，发现了几个回复，但没有解决这个问题。

我只有一个链接，而且我有一个固定到顶部的导航栏。我希望Link与移动/小屏幕中的品牌保持同一条线。

现在在手机上（参考图片如下）：

我试过把它漂浮一下，看看是否有帮助，但事实并非如此。

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。如果您确实希望链接位于顶部，则需要使用媒体查询。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;