twitter-bootstrap 导航栏品牌左侧的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30252387/
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
Button to the left side of navbar-brand
提问by Dibya Jyoti Roy
I am trying to put a button on the left side of navbar-brand for toggling a sidebar. The button toggles the sidebar. In desktop mode, it works fine but on smaller screens, it changes position and comes to the right side of the navbar-brand. Here are the screenshots.
我试图在导航栏品牌的左侧放置一个按钮来切换侧边栏。该按钮切换侧边栏。在桌面模式下，它工作正常，但在较小的屏幕上，它会改变位置并出现在导航栏品牌的右侧。这是屏幕截图。
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" data-toggle="#sidebar" id="sidebar-toggle" class="navbar-left navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Login.aspx" style="vertical-align: middle">
<img src="Logo.png" style="vertical-align: middle" /></a>
<label class="navbar-text text-center text-primary" style="vertical-align:10px;font-size:medium">Example Distribution</label>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search..." />
</form>
</div>
</div>
</nav>
<div class="container-sidebar">
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
</div>
采纳答案by Guruprasad Rao
Just add this code on document.ready
只需添加此代码 document.ready
There might be CSS alternative but I feel this is easy!
可能有 CSS 替代方案，但我觉得这很容易！
$(document).ready(function(){
if($(window).width()<768)
{
$('#sidebar-toggle').css('float','left');
}
$(window).on('resize',function(){
if($(window).width()<768)
{
console.log('here');
$('#sidebar-toggle').css('float','left');
}
});
});
CSS Solution:
CSS 解决方案：
@media screen and (max-width: 768px) {
#sidebar-toggle{
float:left !important;
}
}
Updated DEMO
更新的演示
