![](/img/trans.png)
[英]Bootstrap 4 navbar right align with button that doesn't collapse on mobile
[英]Simple bootstrap Navbar that doesn't collapse and has button to right
我是Bootstrap的新手,我正在使用Bootstrap 4 alpha 6,并且正在努力设置一个简单的导航栏。 我想要左侧的小头钉和右侧的简单按钮。 我查看了文档,似乎无法解决我的问题。 我知道这与Mr-auto或类似的东西有关。 我已经尝试过向右浮动,但这不起作用。 我的按钮位于左侧品牌下方。 这是我的代码...
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">My Brand</a>
<div class="mr-auto">
<a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
</div>
</nav>
任何帮助是极大的赞赏
尝试使用引导程序中的帮助程序类。 文档: Bootstrap响应浮动
<nav class="navbar navbar-light bg-faded">
<div class="col-sm-12">
<div class="float-left">
<a class="navbar-brand" href="#">My Brand</a>
</div>
<div class="float-right">
<div class="mr-auto">
<a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a>
</div>
</div>
</div>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <nav class="navbar navbar-light bg-faded"> <div class="col-sm-12"> <div class="float-left"> <a class="navbar-brand" href="#">My Brand</a> </div> <div class="float-right"> <div class="mr-auto"> <a href=""><button class="btn btn-outline-success my-2 my-sm-0 float-right" type="submit">Search</button></a> </div> </div> </div> </nav>
如果您与html共享了css,它将很有帮助。 “ navbar-right”类将仅在768px宽度以上浮动元素。 如果希望所有屏幕尺寸都向右浮动,请使用float:right样式。
.mr-auto{ float:right; }
我已经附上了它的工作示例http://jsfiddle.net/b1xpte8q/
这个问题基本上是一个重复项: Bootstrap 4将导航栏项目右对齐
使其不折叠的另一个问题是使用navbar-toggle-xl
来防止移动折叠的导航栏...
<nav class="navbar navbar-toggleable-xl navbar-light bg-faded">
<a class="navbar-brand mr-auto" href="#">My Brand</a>
<a href=""><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></a>
</nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.