0
Добрый день, я пытаюсь сделать левое одностороннее меню с бутстрапом. Я использовал jQuery для переключения меню show/hide для нажатия кнопки. Все отлично работает для рабочего стола. Но в мобильном режиме кнопка не находится рядом с меню, как показано ниже.Меню не скрывается должным образом для мобильного просмотра в Bootstrap
Desktop Вид 
Mobile View
Вот мой код,
<body>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#nav1').hide();
$('#btn1').click(function() {
$('#nav1').toggle("slow");
});
});
</script>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#"><b style="font-size: 1.50em">Brand Name</b><br /><span style="font-size: .50em">Brand description</span></a>
<button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-pencil"></span> Register</button>
<button type="button" class="navbar-toggle"><span class="glyphicon glyphicon-off"></span> LogIn</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-right">
<button id="btn2" class="btn btn-default"><span class="glyphicon glyphicon-off"></span> LogIn</button>
<button id="btn3" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span> Register</button>
</ul>
</div>
</div>
</div><br /><br /><br /><br />
<button id="btn1" class="btn btn-default glyphicon glyphicon-home"></button>
<ul id="nav1" class="nav nav-pills nav-stacked col-sm-3">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
Есть ли неправильно в моем коде? Как я могу получить то же самое в мобильном режиме, что и представление Dekstop? Ваша помощь будет очень заметной. Tnx.