引导导航栏左，中心或右对齐的项目

在Bootstrap中，创建Logo a在左边、菜单项在中间、Logo B在右边的导航栏的最平台友好的方法是什么?

这是我迄今为止尝试过的，它最终被对齐，使标志A在左边，菜单项旁边的标志在左边，标志B在右边。

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

当前回答

这是BS5的更新，并建议编辑@Zim的答案。不幸的是，由于编辑队列已满，我无法提交编辑。如果在队列允许新的编辑时，有高声誉的用户可以提交编辑，那就太好了。

2021年更新

引导5.0.0 beta-1

随着rtl支持的增加，ml-auto和mr-auto变成了ms-auto和me-auto(左/右开始/结束)。

引导5还要求导航栏包含在容器div中。

这段代码产生了与第一个Bootstrap 4示例相同的结果:

左、中(品牌)、右链接:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
      <ul class="navbar-nav me-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Left</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="//codeply.com">Codeply</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
    <div class="mx-auto order-0">
      <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Right</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

2021-01-19 19:03:44

其他回答

在引导5中，类被更改，因此为 ml-auto是由ms-auto AND改变的 Mr-auto和me-auto变化

左边我们用s代替l，然后对于右，我们必须用e代替r

2022-02-17 07:13:40

引导4(截至alpha 6)

导航条是用flexbox构建的!你需要的不是浮动，而是flexbox和保证金效用。

对于右对齐，在折叠div上使用justify-content-end:

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

完整的例子在这里:https://jsbin.com/kemawa/edit?output

2017-01-08 04:29:03

引导4

我们有很多方法来对齐导航栏项目。

左对齐

Class = "navbar-nav mr-auto"

右对齐

Class = "navbar-nav ml-auto"

对于中心对齐

Class = "navbar-nav mx-auto"

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <a routerLink="/" class="navbar-brand" href="#">Bootstrap 4</a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="home">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="contact">Contact us</a>
        </li>
    </ul>
</nav>

2019-01-21 12:50:39

这是一个过时的问题，但我找到了一个替代的解决方案，从引导github页面分享权利。文档还没有更新，还有其他关于SO的问题要求相同的解决方案，尽管问题略有不同。这个解决方案不是特定于你的情况，但如你所见，解决方案是<div class="container">后<nav class="navbar navbar-default navbar-fixed-top">，但也可以替换为<div class="container-fluid"根据需要。

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

答案在这一页的小提琴上找到了: https://github.com/twbs/bootstrap/issues/18362

并且在V3中被列为无法修复。

2016-02-09 04:12:02

在想要向右移动的部分上，将左距设置为auto -> ml-auto。

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>

2020-05-23 17:16:53

引导导航栏左，中心或右对齐的项目

推荐文章

最新文章

标签