Bootstrap新手,我使用Bootstrap 4 alpha 6,我正在努力设置一个简单的导航栏。我想要左边的布拉德和右边的简单按钮。我查看了文档,似乎无法解决我的问题。我知道它与mr-auto或类似的东西有关。我试过浮动权利,但这不起作用。我的按钮位于左侧品牌下方。这是我的代码....
vmstat -s|awk 'NR==1{t=$1}NR==2{printf "usedpct=%.2f\n", 100*$1/t;exit}'
非常感谢任何帮助
答案 0 :(得分:1)
尝试使用bootstrap中的帮助程序类。 文档:Bootstrap Responsive floats
<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>
答案 1 :(得分:0)
如果您与html共享css,那将会有所帮助。 “navbar-right”类将浮动元素仅高于768px宽度。如果你想让它适合所有的屏幕尺寸,那么使用float的样式:对。
.mr-auto{
float:right;
}
答案 2 :(得分:0)
这个问题基本上是重复的:Bootstrap 4 align navbar item to the right
使其不崩溃的单独问题是使用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>