强制导航栏元素保持在同一行

Question

强制导航栏元素保持在同一行

3

我希望我的Bootstrap导航栏的元素在任何宽度下都能保持一行。

我知道这个问题已经被问过很多次，我尝试了各种解决方案，但对于我的情况都没有奏效。

这是我的代码：

#head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  white-space: nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>
  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

我希望我的导航条在小屏幕上看起来像这样：

而不是像这样：

- matthiasunt

你想让两个ul都显示为行内元素吗？因为根据你编辑后的问题，现在看起来已经没问题了。 - Edison Biba

4个回答

0

.pull-right{
  float:right;
  }
#head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  width:initial;
  float:left;
  white-space: nowrap;
}
.nav { 
  display: inline-block;
}

@media screen and (max-width:768px)
{

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>
  
  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

- user6768630

很遗憾，您的解决方案没有给我正确的结果。我刚刚编辑了我的问题以澄清我的问题。 - matthiasunt

好的，现在我已经编辑了我的代码，请检查一下，如果需要更多修改，请告诉我，我会帮助你。 - user6768630

0

添加以下CSS，这应该适用于您。

#head-navbar {
  width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
}
.nav>li {
  display: inline-block;
  width:initial;
  float:left;
  white-space: nowrap;
}
.nav { 
  display: inline-block;
}

@media screen and (max-width:768px)
{
  .nav.navbar-nav.pull-right { float:none !important; }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar">
  <ul class="nav navbar-nav">
    <li><a class="#" href="#">Home</a>
    </li>
    <li><a href="#">Page 1</a>
    </li>
    <li><a href="#">Page 2</a>
    </li>
  </ul>
  
  <ul class="nav navbar-nav pull-right">
    <li><a href="#">DE</a>
    </li>
    <li><a href="#">IT</a>
    </li>
  </ul>
</nav>

- Shahil M

很遗憾，您的解决方案没有给我正确的结果。我刚刚编辑了我的问题以澄清我的问题。 - matthiasunt

现在，当屏幕宽度达到768像素的断点时，pull-right导航栏会向左滑动。 - matthiasunt

0

这是由于媒体查询，因此在较小的屏幕上会更改样式。只需添加以下内容：

 .navbar-nav {
    float: right;
    margin: 0;
  }
  .navbar-nav > li {
    float: right;
  }

- Dennis Novac

很抱歉，您的解决方案并没有给我正确的结果。我刚刚编辑了我的问题以澄清我的问题。 - matthiasunt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Edison Biba · Accepted Answer

只需在您的

中添加display: inline-block;，它们就会显示为内联。

.nav>li {
    display: inline-block;
}

此外，如果您想在同一行中显示两个ul，可以对ul元素执行相同的操作。这里有一个jsfiddle可用于两个ul内联显示。

此外，在Firefox中，您将在768px处遇到断点，因此应删除white-space:nowrap。

#head-navbar {
  white-space: normal;
}

附注：我不知道这是否是打字错误，但您应该使用.pull-right而不是.navbar-right来将元素向右浮动。