Question

我正在使用Bootstrap 4默认导航栏，我只想添加一个折叠菜单，该菜单在未折叠时位于右侧，而不是左侧。

我尝试添加(?<!\d[- ]|[\d.,])-?[1-9]\d{0,2}(?:(?:[., ]\d{3})*|\d*)(?![\d%]|[- ][\d%])(?!.*,.*\.*)(?!.*\..*,*)和text-right，但实际上都没有将菜单移到右侧。

Here is a bootply显示问题。

这也是一个代码段，因为StackOverflow希望我使用其中一个，尽管我认为它的宽度不足以显示未折叠的菜单：

float-right

Answer 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>

Answer 2

元素/** * 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

Answer 3

在样式表中添加.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">&#x2630;</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>

Bootstrap 4：在导航栏中向右对齐菜单？

3 个答案: