css - Bootstrap 折叠菜单 - 如何修改 <li> 项中的文本？

Question

我正在使用带有导航栏的 Bootstrap 3。导航栏将折叠 当屏幕尺寸较小时。

当屏幕尺寸较大时，我希望所有菜单项都适合窗口的宽度，因此我使用
标记强制它们使用两行。

当屏幕尺寸较小并且点击折叠菜单时，由于我插入的
标签，菜单项仍然出现在两行。 但我更希望菜单项显示在一行上。

我该怎么做？是否可以更改“数据目标”属性 在按钮标记中，以便数据目标指向另一组没有
元素的

元素？

我想另一种方法是在屏幕尺寸较小时使用 JavaScript 更改

元素的“innerHTML”属性。

感谢您的帮助!

.navbar-nav li {
    display:inline-block;
    list-style-type:none;
    text-align:center;
}

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> 
<a class="navbar-brand" href="#"></a>
</div>


<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
    <li><a href="#">Home<a></li>
    <li><a href="#">White<br />Teas</a></li>
    <li><a href="#">Green<br />Teas</a></li>
    <li><a href="#">Oolong<br />Teas</a></li>
    <li><a href="#">Black<br />Teas</a></li>
    <li><a href="#">Herbal<br />Teas</a></li>
    <li><a href="#">Blooming<br />Teas</a></li>
    <li><a href="#">Mate<br />Teas</a></li>
</ul>
</div>

Answer 1

你只需要去掉你的破坏标签，然后把它放到你的 CSS 中:

.navbar-nav li {
    display:inline-block;
    list-style-type:none;
    text-align:center;
    max-width:10%;
}
@media (max-width:768px){
    .navbar-nav li {
    max-width:100% !important;
}
}

因此，您将调整 li 标签的宽度以使其文本断开或对齐。

这是一个 fiddle