Question

我正在使用带导航栏的Bootstrap 3。导航栏将崩溃当屏幕尺寸很小时。

当屏幕尺寸很大时，我希望所有菜单项都适合窗口的宽度，所以我使用＆lt; br＆gt;标记强制它们使用两行。

当屏幕尺寸很小并且单击折叠菜单时，菜单项仍会显示在两行上，因为＆lt; br＆gt;我插入的标签。但我希望菜单项出现在一行上。

我该怎么做？是否可以更改＆＃34;数据目标＆＃34;属性在按钮标记中，以便数据目标指向另一组＆lt; li＆gt;没有＆lt; br＆gt;的元素元素？

我想另一种方法是使用JavaScript来改变＆＃34; innerHTML＆＃34; ＆lt; li＆gt;的属性屏幕尺寸较小时的元素。

感谢您的帮助！

.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

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

1 个答案: