Css 引导-流体导航栏项
我是一个新手引导用户,目前我想创建一个流畅的导航栏,但当我缩小浏览器时,导航栏会变得很奇怪 收缩前: 进一步收缩后: 正如你所看到的,第二张图片非常糟糕。。我认为一种可能的方法是将单词分成两行(例如,第1行-goto,第2行-Hello_World!)。有人能给我一个更好的方法来解决这个问题吗?提前谢谢 当前HTML代码:Css 引导-流体导航栏项,css,twitter-bootstrap,twitter-bootstrap-3,Css,Twitter Bootstrap,Twitter Bootstrap 3,我是一个新手引导用户,目前我想创建一个流畅的导航栏,但当我缩小浏览器时,导航栏会变得很奇怪 收缩前: 进一步收缩后: 正如你所看到的,第二张图片非常糟糕。。我认为一种可能的方法是将单词分成两行(例如,第1行-goto,第2行-Hello_World!)。有人能给我一个更好的方法来解决这个问题吗?提前谢谢 当前HTML代码: <nav class="navbar navbar-default"> <div class="container-fluid"> &
<nav class="navbar navbar-default">
<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 logo-container" href="#"><img class="logo" alt="Logo" src="images/test.png" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="code">goto </span><span class="section-name">Hello_World!</span></a></li>
<li><a href="#"><span class="code">goto </span><span class="section-name">About_Me</span></a></li>
<li><a href="#"><span class="code">goto </span><span class="section-name">Life_Graph</span></a></li>
<li><a href="#"><span class="code">goto </span><span class="section-name">Skill_Trees</span></a></li>
<li><a href="#"><span class="code">goto </span><span class="section-name">Feat_Stacks</span></a></li>
<li><a href="#"><span class="code">goto </span><span class="section-name">Codetact_Me</span></a></li>
</ul>
</div>
</div>
</nav>
这是我的…如果我对您的问题理解正确,您可以使用.row和.col将菜单阻止到新行
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="row">
<div class="navbar-header col-sm-1">
...
</div>
<div class="col-sm-11">
<div class="collapse navbar-collapse" id="myNavbar">
...
</div>
</div>
</div>
</div>
</nav>
...
...
您可以更改md xx列,使其变宽或变小
更多信息
你能创建JSFIDDLE吗?你有没有忽略它?还没有,但我会仔细看看