Question

我目前有一个导航栏，其中包含太多链接，因此导航到另一行。有什么办法可以将所有内容都限制在一行上，而只是缩小一点？

我的代码：

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

这会立即将导航栏强制到另一行，因为它太大了。

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

Answer 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;
  }
}

我创建了一个Codepen。 Have a look，如果这可以解决您的问题。

如何将Boostrap导航栏缩小为一行？

1 个答案: