具有左，中或右对齐项的Bootstrap NavBar

HTML CSS

伽罗GreenNear

2020-03-19

在Bootstrap中，最简单的平台创建导航栏的方法是在左侧显示徽标A，在中央显示菜单项，在右侧显示徽标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>

第2346篇《具有左，中或右对齐项的Bootstrap NavBar》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答
村村小宇宙凯 2020.03.19

最简单的解决方案：

只需将其navbar分为几列即可：例如，如果您总共有24列，则12个将为空，而12个将限制导航栏：

<nav class="navbar navbar-default">
    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
</nav>
路易LEY 2020.03.19 
<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>

根据上述划分，将要居中的字段放在右侧，右侧或左侧。

乐泡芙A 2020.03.19

这是一个过时的问题，但是我找到了一个替代解决方案，可以从bootstrap 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中被列为“无法修复”。

A达蒙 2020.03.19

我发现以下是一个更好的解决方案，具体取决于您左，中和右项目的内容。100％的宽度没有边距会导致div重叠，并且会阻止定位标记正常工作-也就是说，不会混乱使用z-indexs。

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}
小哥宝儿 2020.03.19

拍了拍我的头，只是重新读了一下我的答案，才意识到OP要求在左边有两个徽标，在右边有一个中心菜单，而不是相反。

通过在Bootstrap的徽标中使用“ navbar-right”和“ navbar-left”，然后在UL中使用“ nav-justified”而不是“ navbar-nav”，可以严格地在HTML中完成此操作。不需要其他CSS（除非您想将navbar-collapse切换开关放置在xs视口的中心，然后需要重写一点，但将由您自己决定）。

<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 class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

Bootply：http：//www.bootply.com/W6uB8YfKxm

对于那些来到这里尝试以“品牌”为中心的人，这是我的老答案：

我知道这个线程有些旧，但是只是为了发布我的发现。自从tomaszbak打破collaspe以来，我决定以skelly的答案为基础。首先，我在CSS中创建了“ navbar-center”并关闭了普通navbar的float：

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

但是，skelly答案的问题是，如果您的品牌名称过长（或者您想为品牌使用图片），那么一旦进入sm视口，由于绝对位置和评论者的原因，它们可能会重叠说，一旦进入xs视口，切换开关就会中断（除非您使用Z定位，但我真的不想为此担心）。

因此，我要做的是利用引导响应实用程序创建品牌块的多个版本：

<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 class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

因此，现在lg和md视口的品牌集中在左侧和右侧，一旦进入sm视口，链接将落至下一行，以免与品牌重叠，最后在xs视口中的collaspe插入，您可以使用切换开关。您可以更进一步，并在与navbar-brand一起使用时修改navbar-right和navbar-left的媒体查询，以便在sm视口中所有链接都居中，但没有时间对其进行审核。

您可以在这里检查我的旧引导程序：www.bootply.com/n3PXXropP3

我想拥有3个品牌可能和“ z”一样麻烦，但是我觉得在自适应设计的世界中，这种解决方案更适合我的风格。

米亚卡卡西 2020.03.19

Bootstrap 4 (as of alpha 6)

Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.

对于justify-content-end在collapsediv 上使用“ 右对齐” ：

<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

老丝镜风 2020.03.19

我需要类似的东西（左，中和右对齐的项目），但是能够将居中的项目标记为活动状态。对我有用的是：

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;
  }
}
神无梅Eva 2020.03.19

引导程序4

我们有很多方法来对齐navBars项目。

对于左对齐 在此处输入图片说明

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="#">Bootsrap 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>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android