Html 带有 Bootstrap 的导航栏右侧的语言选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29365026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 03:45:05 来源:igfitidea点击:
Language picker in the navbar right side with Bootstrap
提问by sharkbait
I have this part of code:
我有这部分代码：
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span>
</button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home" class="smoothScroll">Home</a></li>
<li> <a href="#about" class="smoothScroll"> About</a></li>
<li> <a href="#houses" class="smoothScroll"> Houses</a></li>
<li> <a href="#products" class="smoothScroll"> Products</a></li>
<li> <a href="#contact" class="smoothScroll"> Contact</a></li>
<li>
<a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a>
</li>
<li>
<a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a>
</li>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>I would put this language picker
我会把这个语言选择器
<li>
<a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a>
</li>
<li>
<a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a>
</li>in the right side of the navbar and if it's possible in a dropdown menu.
在导航栏的右侧，如果可能，在下拉菜单中。
How can I do this? I tried with pull-rightand dropdown-menuclass attributes, but without success.
我怎样才能做到这一点？我尝试使用pull-right和dropdown-menu类属性，但没有成功。
回答by RikyTres
From the bootstrap documentationI found this:
从引导程序文档中，我发现了这一点：
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
then in your snipped...
然后在你的剪辑...
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span></button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home" class="smoothScroll">Home</a></li>
<li> <a href="#about" class="smoothScroll"> About</a></li>
<li> <a href="#houses" class="smoothScroll"> Houses</a></li>
<li> <a href="#products" class="smoothScroll"> Products</a></li>
<li> <a href="#contact" class="smoothScroll"> Contact</a></li>
<li><a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li>
<li><a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li>
</ul>
</div><!--/.nav-collapse -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
回答by dtk
with some change I was able to obtain what I want
通过一些改变，我能够获得我想要的
The example in the docsactually shows that the dropdown nav needs to live insidethe collapsible div:
将在文档例子实际上表明，下拉导航需要生活中的可折叠的div：
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon icon-heart" style="font-size:30px; color:#3498db;"></span>
</button>
<a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-heart" style="font-size:18px; color:#3498db;"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home" class="smoothScroll">Home</a></li>
<li> <a href="#about" class="smoothScroll"> About</a></li>
<li> <a href="#houses" class="smoothScroll"> Houses</a></li>
<li> <a href="#products" class="smoothScroll"> Products</a></li>
<li> <a href="#contact" class="smoothScroll"> Contact</a></li>
<li> <a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li>
<li> <a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="language" rel="it-IT"><img src="assets/img/it_IT.png" alt="Italiano" /></a></li>
<li><a href="#" class="language" rel="en-US"><img src="assets/img/en_US.png" alt="English" /></a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div>
</div>
Disclaimer:I tried to just fix the accepted answer, but the edit was rejected.
免责声明：我试图只修复接受的答案，但编辑被拒绝。
