如何将 Bootstrap 导航栏缩小为一行？答案

【问题标题】：How to shrink Boostrap navbar into one line?如何将 Bootstrap 导航栏缩小为一行？
【发布时间】：2018-10-12 22:01:55
【问题描述】：

我目前有一个包含太多链接的导航栏，所以它转到另一行。有没有什么办法可以把所有内容都限制在一行，但让它更小？

我的代码：

<div class= "collapse navbar-collapse navbar-ex1-collapse">
     <ul class= "nav navbar-nav>
          <li class="active"><a href ="#" Home</a></li>
          <li> <a href="#" Link </a></li>

但扩展了 20 多个列表索引。以前的网站是在一行中使用 22 列完成的，但我需要让导航做出响应。

我也有一个问题，文本跨越一行而不是拆分，这会迫使导航栏链接更大，例如；

<li> <a href="#" Health and Safety Policy</a></li>

这只会迫使导航栏立即进入另一行，因为它太大了。

我尝试过缩小文本，使用换行符并将导航栏放入行类中。

【问题讨论】：

标签： html twitter-bootstrap web twitter-bootstrap-3

【解决方案1】：

我想你想在小屏幕上使用垂直菜单，在桌面上使用水平菜单。

<nav>
  <ul>
    <li>Heart is where home is</li>
    <li>We live to work for our clients</li>
    <li>You might want to see our work</li>
    <li>Find us on google maps before visiting</li>
    <li>Got FAQs? search or contact us to get sorted</li>
  </ul>
</nav>

和css

ul,li{
  margin:0;
  padding:0;
}
li{
  list-style:none;
  border-bottom:none;
  text-decoration:underline;
  border:1px solid black;
  padding:5px;
}
li:hover{
  cursor:pointer;
  color:lightgrey;
}
nav
{
 display:block;
 color:white;
 background:grey;
 width:300px;
}

@media screen and (min-width:922px){
  nav{
    width:100%;
    text-align:center;
  }
  nav,
  ul{
    display:flex;
    background:lightblue;
  }
  li{
    transition: color 1s ease-in;
  }
  li:hover{
    color:grey;
  }
}

我创建了一个代码笔。 Have a look 如果这能解决您的问题。

【讨论】：