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

【问题标题】：Bootstrap Collapse Menu - How Can I modify the Text in the <li> Items?Bootstrap 折叠菜单 - 如何修改 <li> 项中的文本？
【发布时间】：2015-08-03 09:37:21
【问题描述】：

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

当屏幕很大时，我希望所有菜单项都适合窗口的宽度，所以我使用
标签强制它们使用两行。

当屏幕很小并且点击折叠菜单时，菜单项仍然出现在两行，因为我插入了
标签。但我更希望菜单项出现在一行上。

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

元素？

我想另一种方法是在屏幕较小时使用 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>

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案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

【讨论】：