简单 bootstrap 不会折叠且按钮位于右侧的导航栏
Simple bootstrap Navbar that doesn't collapse and has button to right
bootstrap 的新手,我正在使用 Bootstrap 4 alpha 6,我正在努力设置一个简单的导航栏。我想要左边的布拉德和右边的简单按钮。我查看了文档,但似乎无法解决我的问题。我知道它与 mr-auto 或类似的东西有关。我试过 float-right,但那不起作用。我的按钮就位于左侧品牌下方。这是我的代码....
<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>
非常感谢任何帮助
如果您将 css 与 html 一起分享,那将会很有帮助。 "navbar-right" class 将仅在 768px 宽度以上浮动元素。如果你想让它在所有屏幕尺寸下都浮动,那么使用 float:right 的样式。
.mr-auto{
float:right;
}
我附上了它的工作示例http://jsfiddle.net/b1xpte8q/
尝试使用来自 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>
这个问题基本上是以下问题的重复:
使其不折叠的另一个问题是使用 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>
bootstrap 的新手,我正在使用 Bootstrap 4 alpha 6,我正在努力设置一个简单的导航栏。我想要左边的布拉德和右边的简单按钮。我查看了文档,但似乎无法解决我的问题。我知道它与 mr-auto 或类似的东西有关。我试过 float-right,但那不起作用。我的按钮就位于左侧品牌下方。这是我的代码....
<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>
非常感谢任何帮助
如果您将 css 与 html 一起分享,那将会很有帮助。 "navbar-right" class 将仅在 768px 宽度以上浮动元素。如果你想让它在所有屏幕尺寸下都浮动,那么使用 float:right 的样式。
.mr-auto{
float:right;
}
我附上了它的工作示例http://jsfiddle.net/b1xpte8q/
尝试使用来自 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>
这个问题基本上是以下问题的重复:
使其不折叠的另一个问题是使用 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>