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

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

当前回答

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

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

2022-02-17 07:13:40

其他回答

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

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

2022-02-17 07:13:40

<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

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

最简单的解决方案:

只需将导航栏划分为列:例如，如果你总共有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>

2018-09-02 22:21:11

我发现以下是一个更好的解决方案，取决于你的左，中，右项目的内容。宽度为100%而没有边距会导致div重叠，并且会阻止锚标记正确工作——这是在没有混乱使用z索引的情况下。

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

2014-05-29 09:24:12

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

推荐文章

最新文章

标签