html - Bootstrap 固定导航栏链接与品牌保持在同一行

Question

在开始之前，我搜索了过去几个小时，找到了几个回复，但没有一个能解决这个问题。

我只有一个链接，而且我有一个固定在顶部的导航栏。我希望链接与品牌在移动设备/小屏幕上保持在同一行。

现在在移动设备上(引用下图):

我试过将其向右浮动以查看是否有帮助，但没有。

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>