强制Navbar元素保持在一行 [英] Force Navbar elements to stay in one line

问题描述

我不希望我的 Bootstrap Navbar 的元素在每个宽度都保持一行。

我知道这个问题已经

，而不是这样：

解决方案

只需在 li 中添加 display：inline-block; ，它们将以内联方式显示。

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

此外，如果要显示 ul 在同一行你可以做同样的事情到 ul 元素。你有一个 jsfiddle ul inline。

在firefox中你将有一个断点在768px所以你应该删除 white-space：nowrap

 ＃head-navbar {
 white-space：normal; 
} 
  

$ b $ p Ps：我不知道是不是TYPO， .pull-right 而不是 .navbar-right 可向右浮动一个元素

I wan't the elements of my Bootstrap Navbar to stay in one line at every width.

I know this question has already been asked several times and I've tried various solutions, but no one worked for my case.

Here's my code:

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

I want my Navbar to look like this on a smaller screen:

and not like this:

解决方案

Just add display: inline-block; to your li and they will be displayed inline.

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

Also if you want to display both ul in the same line you can do the same thing to the ul elements.Here you have a jsfiddle for both ul inline.

Also in firefox you will have a breakpoint in 768px so you should remove the white-space:nowrap

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

P.s : i don't know if it is a TYPO but you should use .pull-right instead of .navbar-right to float right an element

这篇关于强制Navbar元素保持在一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！