在bootstrap-4中将导航项目与右侧对齐_Bootstrap 4_Navbar_Nav

在bootstrap-4中将导航项目与右侧对齐

bootstrap-4

在bootstrap-4中将导航项目与右侧对齐,bootstrap-4,navbar,nav,Bootstrap 4,Navbar,Nav,我刚刚切换到bootstrap 4，并重新编写了所有html和SCS来使用它，我似乎找不到如何将一组导航项放在导航栏的右侧。这是我的导航条形码： <nav class="navbar navbar-full navbar-dark bg-primary"> <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarRes

我刚刚切换到bootstrap 4，并重新编写了所有html和SCS来使用它，我似乎找不到如何将一组导航项放在导航栏的右侧。这是我的导航条形码：

<nav class="navbar navbar-full navbar-dark bg-primary">
        <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
        <%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %>
        <div class="collapse navbar-toggleable-sm" id="navbarResponsive">   
            <ul class="nav navbar-nav float-md-left">
                <li class="nav-item">
                    <%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %>
                            <%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %>
                    <% end %>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a>
                    <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                        <%= link_to "Popular", recipes_path(sort_attribute: "popularity", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Newest", recipes_path(sort_attribute: "created_at", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Updated", recipes_path(sort_attribute: "most_active", sort_order: :desc), class: "dropdown-item" %>
                        <%= link_to "Most Saved", recipes_path(sort_attribute: "save_count", sort_order: :desc), class: "dropdown-item" %>
                    </div>
                </li>
            </ul>
            <ul class="nav navbar-nav float-md-right">
                <% if user_signed_in? %>
                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <%= current_user.displayname.present? ? "D-ring" : current_user.firstname %>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                            <%= link_to "Profile", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Recipe Box", user_saved_recipes_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Add Recipe", new_recipe_path, class: "dropdown-item" %>
                            <%= link_to "Submitted Recipes", user_path(current_user.id), class: "dropdown-item" %>
                            <%= link_to "Sign Out", destroy_user_session_path, :method => :delete, class: "dropdown-item" %>
                        </div>
                    </li>
                <% else %>
                    <li class="nav-item">
                        <%= link_to "Create Account", '', data: {:'toggle' => 'modal', :'target' => '#signupModal'}, class: "nav-link" %>
                    </li>
                    <li class="nav-item">
                        <%= link_to "Login", '', data: {:'toggle' => 'modal', :'target' => '#loginModal'}, class: "nav-link" %>
                    </li>           
                <% end %>
            </ul>
        </div>
    </nav>




“获取”，id:“搜索表单”，class:“表单内联”）do%>






：删除，类别：“下拉项”%>


'modal'，：'target'=>'#signupModal'}，类：“导航链接”%>


'modal'，：'target'=>'#loginModal'}，类：“导航链接”%>

这是它的屏幕截图

TL；医生：

为右侧所需的导航栏项目创建另一个

。

ml auto

会将您的

navbar nav

向右拉，而

mr auto

会将其向左拉

根据Bootstrap v4.5.2进行测试


/*Stackoverflow预览修复，请忽略*/
.导航栏导航{
弯曲方向：行；
}
.导航链路{
填充权限：.5rem！重要；
左侧填充：.5rem！重要；
}
/*修复了右侧的下拉菜单*/
.ml自动下拉菜单{
左：自动！重要；
右：0px；
}

这应该适用于alpha 6。钥匙是左导航上的“mr auto”类，它将右导航推向右侧。您还需要添加navbar Togleable md，否则它将堆叠在一列而不是一行中。注意：我没有添加其余的切换项（例如切换按钮），我添加的内容刚好足以使其按要求格式化。这里有更完整的例子

在最新版本中，这更简单。只需将

ml auto

类放入

ul

中，如下所示：

<ul class="nav navbar-nav ml-auto">


带引导v4.0.0-alpha.6：两个s（.navbar na
），一个带.mr auto
和一个带.ml auto
：
<nav ...> 
  ...     
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Left Link </a>
      </li>
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Right Link </a>
      </li>
    </ul>
  </div>
</nav>


...     










在Bootstrap 4 alpha-6版本中，由于navbar使用的是flex模型，因此您可以在父级的div中使用调整内容结束
，并删除mr auto

<div class="collapse navbar-collapse justify-content-end" id="navbarText">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>











这就像一个符咒：）
在我的例子中，我正在寻找一个解决方案，允许一个导航栏项目右对齐。为此，您必须将style=“width:100%”“
添加到
中，然后将ml auto
类添加到您的navbar项中。


我有一个工作代码笔，带有左右对齐的导航链接，所有链接都使用折叠成一个响应菜单。在父标签上对齐之间的内容：

这里是一个简单的例子
<!-- Navigation bar-->

<nav class="navbar navbar-toggleable-md bg-info navbar-inverse">
    <div class="container">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
            <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="mainMenu">
            <div class="navbar-nav ml-auto " style="width:100%">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Training</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </div>
    </div>
</nav>


对Alpha 6使用ml auto
，如下所述：请注意pull-*-*
已被弃用，请改用float-*-*
float xs-*
在alpha6中似乎不起作用，因此使用alpha6的float right
检查此项正确答案是将类ml auto
添加到
此解决方案ml auto
对引导程序而言非常不直观，令人恶心。（仅供参考：这不是敲打答案）虽然您的解决方案可行，但我们都应该同意，无论我们使用什么解决方案，Bootstrap 4都是一个解决方案，它还远远不够稳定，而且，规则和命名约定在不断变化，这会减慢任何开发。感谢您帮助我们度过这一困境，直到我们获得一个稳定的版本。更新您应该将导航栏的所有类都放在可拾取的-*上，这样导航就不会在所有屏幕大小上堆叠起来。这对我很有用。我是t
<!-- Navigation bar-->

<nav class="navbar navbar-toggleable-md bg-info navbar-inverse">
    <div class="container">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
            <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="mainMenu">
            <div class="navbar-nav ml-auto " style="width:100%">
                <a class="nav-item nav-link active" href="#">Home</a>
                <a class="nav-item nav-link" href="#">About</a>
                <a class="nav-item nav-link" href="#">Training</a>
                <a class="nav-item nav-link" href="#">Contact</a>
            </div>
        </div>
    </div>
</nav>