bootstrap-4 - 将导航项与 bootstrap-4 中的右侧对齐-6ren

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

转载作者：行者123 更新时间：2023-12-03 04:09:34

24

4

我刚刚切换到 bootstrap 4 并重新设计了所有 html 和 scss 来使用它，但我似乎无法找到如何将一组导航项放在导航栏的右侧。这是我的导航栏代码:

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

这是它的屏幕截图

最佳答案

TL；博士:

创建另一个<ul class="navbar-nav ml-auto">对于您想要在右侧的导航栏项目。
ml-auto会拉你的navbar-nav到右边mr-auto会将其拉到左侧。

针对 Bootstrap v4.5.2 进行测试

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
  <style>
    /* Stackoverflow preview fix, please ignore */
    .navbar-nav {
      flex-direction: row;
    }
    
    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }
    
    /* Fixes dropdown menus placed on the right side */
    .ml-auto .dropdown-menu {
      left: auto !important;
      right: 0px;
    }
  </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link">Left Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link">Left Link 2</a>
    </li>
  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link">Right Link 1</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">            Dropdown on Right</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
      </div>
    </li>
  </ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>

如您所见，已添加额外的样式规则来解决 Stackoverflows 预览框中的一些奇怪问题。
您应该能够安全地忽略项目中的这些规则。

从 v4.0.0 开始，这似乎是官方的方法。

编辑:我修改了帖子，按照@Bruno的建议在导航栏右侧添加了一个下拉菜单。它需要它的left和right要反转的属性。我在示例代码的开头添加了额外的 css 片段。
请注意，当您单击Run code snippet时，该示例显示移动版本。按钮。要查看桌面版本，您必须单击 Expand snippet按钮。

.ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
}

将其包含在样式表中应该可以解决问题。

关于bootstrap-4 - 将导航项与 bootstrap-4 中的右侧对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40178386/

24

4

0

文章推荐： amazon-web-services - 无法 ping AWS EC2 实例

文章推荐： fiddler - 过滤 Fiddler 流量

文章推荐： .htaccess 将所有页面重定向到新域上的主页

文章推荐：正则表达式:抓取引号之间的值

iframe - 如何在谷歌浏览器中创建侧边栏(右侧)？
似乎这是不可能的，但如果有人提示如何在谷歌浏览器中创建右侧边栏(如 iframe)，任何提示都会有所帮助。谢谢。最佳答案如果你的意思是这样的这是来自 google chrome 实验 api:
c - 如何修剪该数组中的空格(右侧)？
您好，我在用 C 语言解决编程任务时遇到问题。 The funktion "Trim" should replace all spaces at the end of a String with nu
c# - 查找将窗口停靠到左侧/右侧
有什么方法可以找到一个事件(或属性或方法或类似的东西)来检测窗口停靠到左侧或右侧吗？描述: 通过 WindowState 属性，您可以了解当您的窗口在正常/最小化/最大化这三种状态之间改变状态时。在
c++ - 寻找算法来确定一个点是否在圆弧的左侧/右侧
我目前需要找到一个算法来确定一个点是在圆弧的右侧还是左侧。这是以下算法的扩展以包含弧: // isLeft(): tests if a point is Left|On|Right of an i
selenium-webdriver - 如何将窗口位置设置到屏幕的左侧/右侧
我正在使用 Selenium 执行测试，该测试在 3 个浏览器上并行执行。我想以下一种方式定位 window :左侧，右侧和底部，所以基本上我正在寻找与 (start btn+left btn...)
jquery 在表单中插入 div 右侧
如果我有下面的代码，并且我想插入一个带有 jquery 的 div 作为表单标记内的第一个元素，那么最好的方法是什么？ //i want to insert a div here with
python - 排列排序列表中的元素，使所有冗余元素位于列表的左侧/右侧
有没有比这个更好的方法来解决这个问题？ def 渲染(arr): single_elements = [] double_elements = [] for i in xrange(len(arr
html - 右侧 float 元素
Home About
html - 右侧 float 的div无法调整其左侧图像的大小并溢出
我遇到的问题是: www.dondolomemories.it 当调整窗口大小时， Logo 图像直到最后一刻才调整大小，导致可怕的两行菜单溢出。我花了将近 2 个小时尝试大量不同的设置。有人可以帮
右侧 float 下的 CSS
我希望我能很好地解释这一点。我有一个 style="float: right;"的 div在这个 div 中，我有一个包含一些编辑器字段的表。但现在我想要两个文本编辑器框(在 .NET MVC3 @H
html - 右侧 div 的放置和并排设计
如果有人能帮助我解决这个问题，我将不胜感激，因为我无法让它工作。这是我正在努力处理的代码:http://jsfiddle.net/sp91c3nk/ 基本上，我希望右侧导航栏与灰色主要内容区域处于同
css - 在图像的顶部、右侧、底部和左侧对齐文本？
我正在尝试在图像的所有四个边上添加文本，但我无法让正确的文本正确对齐。右边的文字仍然在左边。 fiddle :https://jsfiddle.net/y75L0ww9/ Text on top Te
半高的 css3 阴影框顶部和左侧 + 右侧
我正在尝试为顶部以及左侧和右侧设置 css 阴影，但高度降低。我熟悉模糊/半径，但我希望阴影非常短。 picture from wix template (还不能上传，抱歉) 有人可以帮帮我吗？我看到
html - 如何将按钮放在另一个按钮的(右侧)旁边
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
CSS:想要位置:粘性以将元素放置在其父容器的底部/右侧
请看这个jsfiddle . 我想要与 innerText “嗨!”始终出现在其包含父级的可见部分的底部/右侧。它不应与其父级的内容一起滚动。 HTML: Header
html - 右侧 float 提交
我有一个输入框和一个提交按钮。当我向右浮动提交按钮时，我希望它在与输入字段相同的点结束 - 这是我的意思的一个例子:http://prntscr.com/aggln5 目前，输入和提交在不同的点结束
css - 右侧 float 元素的奇怪填充或边距
我基本上刚刚开始让我的网站响应，但出于某种原因，语言 div (#lang) 设置为向右浮动，正在向右浮动，但在它的右侧有一个小边距。虽然没有填充设置父 div #container，但我无法理解。
html - 右侧 float 框
我目前正在创建一个网站，该网站有一个带有文本等内容的居中框。现在，我还想要一个漂浮在右边的盒子，与我的主盒子有一点缝隙。留个图吧，我画的红框就是我要制作的 float 框。顺便说一句。蓝色方框只是我
css - 右侧 Bootstrap 上的个人资料图片
我不是 UI 开发人员，但这次需要玩 css。为用户配置文件编写表单。我快完成了，但还有一个小问题。问题个人资料图片未正确显示在右侧。因此，第一个字段(组织名称)显示不正确自从过去两个小时以来，
javascript - 卸下右侧和底部/右侧 handle
我有以下脚本: http://jsfiddle.net/rYFEY/12/ 效果很好，除了我需要移除右侧和右下角的 handle ，只留下底部 handle 用于调整大小。目前，如果我点击右 hand

首页

博学

6Ren·AI

商城

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

针对 Bootstrap v4.5.2 进行测试