Code
2023-07-04 10:00:04

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

在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 ms-auto工作为我移动导航项右

bootstrap的代码是:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

我在ul标签<ul class="navbar-nav">更改为<ul class="navbar-nav ms-auto mb-2 mb-lg-0">，它对我来说工作得很好

我编辑后的代码是:

 <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
      <a class="navbar-brand nav-title" href="#">Cooking Master</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
2021-12-28 13:43:36

我需要一些类似的东西(左、中、右对齐的项目)，但是能够将居中的项目标记为活动。对我有用的是:

http://www.bootply.com/CSI2KcCoEM

<nav class="navbar navbar-default" role="navigation">
  <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>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

CSS:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}
2014-10-26 15:54:46

引导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 
<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

把你想要的字段按照上面的划分放在中间、右边或左边。

2019-09-08 04:40:58

在Zim的回答中，例子5的左边和中间只有空白的右边并不是真正的中心navlinks。我们可以用一些改变来修复它:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <p>Zim's original code</p> <!-- example 5 left and center only with empty space right --> <nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap"> <div class="container-fluid"> <button class="navbar-toggler flex-grow-sm-1 flex-grow-0 me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar5"> <span class="navbar-toggler-icon"></span> </button> <span class="navbar-brand flex-grow-1">Navbar 5</span> <div class="navbar-collapse collapse flex-grow-1 justify-content-center" id="navbar5"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Codeply</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> <div class="flex-grow-1"> <!--spacer--> </div> </div> </nav> <div class="centerMarker">mid</div> <br><br><br> <p>Modified solution</p> <!-- example 5 left and center only --> <nav class="navbar navbar-expand-sm navbar-dark bg-primary flex-sm-nowrap flex-wrap"> <!-- 2.5rem is height of the toggler --> <div class="container-fluid" style="height:2.5rem"> <span class="navbar-brand position-absolute"> <button class="navbar-toggler me-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar5"> <span class="navbar-toggler-icon"></span> </button> Navbar 5 </span> <div class="navbar-collapse collapse mx-auto w-100" id="navbar5"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Codeply</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </div> </nav> <div class="centerMarker">mid</div> <style> body { font-family: monospace; padding: 10px } .centerMarker { margin: 0 auto; width: fit-content; background-color: wheat; } </style> Switch to full page and resize browser to see navlinks.

Bootstrap不允许我们设置flex-basis:0，所以属性仍然是自动的，间隔器不会相等地展开。所以导航链接不是居中。 我们可以在brand container上使用class position-absolute，在navlinks上使用mx-auto w-100。切换器将导航条的最小高度设置为2.5rem。我们必须设置为流体div容器。

2021-12-01 19:14:45

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1