我正在使用Bootstrap 4默认导航栏,我只想添加一个折叠菜单,该菜单在未折叠时位于右侧,而不是左侧。
我尝试添加(?<!\d[- ]|[\d.,])-?[1-9]\d{0,2}(?:(?:[., ]\d{3})*|\d*)(?![\d%]|[- ][\d%])(?!.*,.*\.*)(?!.*\..*,*)
和text-right
,但实际上都没有将菜单移到右侧。
Here is a bootply显示问题。
这也是一个代码段,因为StackOverflow希望我使用其中一个,尽管我认为它的宽度不足以显示未折叠的菜单:
float-right
答案 0 :(得分:1)
向包含菜单的ml-auto
标签添加ul
类
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
<a href="#" class="nav-link">Homes</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
答案 1 :(得分:0)
元素/**
* Interface definition for a callback to be invoked when a view is clicked.
*/
public interface OnClickListener {
/**
* Called when a view has been clicked.
*
* @param v The view that was clicked.
*/
void onClick(View v);
}
需要.collapse.navbar-collapse
类,因为它是通过flex(.justify-content-end
)定位的,并占用了导航栏的全部剩余宽度。
使用display: flex
的其他答案是完全正确的。两者之间的区别在于.ml-auto
将使所有元素都在导航栏折叠stick to the right中,而.justify-content-end
仅对插入.ml-auto
之后的元素起作用,因此左侧can still stick to the left上的那个。您可以选择最合适的一种,并随意将两者结合起来以获得更复杂的布局。
您可以找到here更新的Boolply。
ul.nav.nav-bar
答案 2 :(得分:-1)
在样式表中添加.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;}
。谢谢
.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto"> <!-- here -->
<li class="active nav-item"><a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item"><a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</div>