twitter-bootstrap 如何在引导程序中使我的幻灯片从左到右切换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31098929/
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
How to make my slide toggle from left to right in bootstrap?
提问by Dreams
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li><a href="#">MANUALS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SPARE PART</a></li>
<li><a href="#">WHERE TO BUY</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">EDIT BOOK</a></li>
<li><a href="#">ADMIN</a></li>
<!-- <li><a href="#" id="logout">LOG OUT</a></li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>I am using bootstrap for my responsive navbar on mobile view. When I click the button and the navbar menu is display from top to down.
我在移动视图上为我的响应式导航栏使用引导程序。当我单击按钮时，导航栏菜单从上到下显示。
What should I do to can make it from left to right?(Remember to resize your windows to mobile size).
我应该怎么做才能让它从左到右？（记得把你的窗口调整到手机大小）。
回答by Pratik Shah
You can check out this popular Bootstrap fork available: Jasny Bootstrap
你可以查看这个流行的 Bootstrap fork：Jasny Bootstrap
It has the same slide in from left effect.
它具有相同的从左侧滑入的效果。
<link href="http://www.jasny.net/bootstrap/dist/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://www.jasny.net/bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
<a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>回答by Pratik Shah
With the Jasny Bootstrap slide-in plug-in, the default class is "navmenu-fixed-left". You can change the class to "navmenu-fixed-right" to make the menu slide in from the right side:
对于 Jasny Bootstrap 滑入式插件，默认类是“navmenu-fixed-left”。您可以将类更改为“navmenu-fixed-right”以使菜单从右侧滑入：
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li><a href="about.php">About</a></li>
<li><a href="capabilities.php">Capabilities</a></li>
</ul>
</div>
If you also want the toggle button to appear on the right side, you need to adjust some CSS:
如果您还希望切换按钮出现在右侧，则需要调整一些 CSS：
.navbar-default .navbar-toggle-box {
float: right;
margin-left: 15px;
margin-right: 0;
margin-top: 0;
position: absolute;
right: 0;
}
回答by Jay Patel
You need to override following two properties to archive this. Here you should also use pull-leftbootstrap class, this class element move into left side only but doesn't set margin. I thought you should override base on the requirement.
您需要覆盖以下两个属性才能存档。在这里您还应该使用pull-left引导程序类，此类元素仅移动到左侧但不设置边距。我认为你应该根据要求覆盖。
.nav-left{
float: left !important;
margin: 8px 15px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed nav-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Search Box -->
<form class="navbar-form navbar-left" role="search" id="search_mobile">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter your manual keyword">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav">
<li><a href="#">MANUALS</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SPARE PART</a></li>
<li><a href="#">WHERE TO BUY</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">EDIT BOOK</a></li>
<li><a href="#">ADMIN</a></li>
<!-- <li><a href="#" id="logout">LOG OUT</a></li> -->
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</div>
</nav>