Home / Questions / 1250
Accepted
Alan
Asked: 2020-12-18 07:43:14 +0800 CST 2020-12-18 07:43:14 +0800 CST

如何将 bootstrap3 导航栏的某些组件向左对齐，而将其他组件向右对齐？

  • 772

从navbar标准的Bootstrap开始，我们需要一些按钮或链接向左对齐，其他的对齐到中心（例如：我们的图标brand）和其他的向右对齐。

这是我尝试做的第一件事：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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="#">Izquierda 1</a></li>
      <li class="navbar-left"><a href="#">Izquierda 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center</a></li>
      <li class="navbar-right"><a href="#">Derecha 1</a></li>
      <li class="navbar-right"><a href="#">Derecha 2</a></li>
    </ul>
  </div>
</nav>

搜索Bootstrap 3文档我没有找到任何示例或想法如何实现这一点。怎么可能做到？

html5

4 Answers

  1. Best Answer

    无需修改 html 结构的解决方案是使用.pull-rightli 向右和.pull-left向左放置并放置此脚本：

      .navbar-nav {
    width: 100%;
    text-align: center;

  }

  .navbar-nav > li {
      float: none;
      display: inline-block;
    }

    这允许我们从所有<li>居中的开始，然后根据需要将它们拉到右侧和/或左侧。

    最终的 HTML 如下所示：

    <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="pull-left"><a href="#">Izquierda 1</a></li>
      <li class="pull-left"><a href="#">Izquierda 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center</a></li>
      <li class="pull-right"><a href="#">Derecha 1</a></li>
      <li class="pull-right"><a href="#">Derecha 2</a></li>
    </ul>
  </div>
</nav>

    活生生的例子

    • 9

  2. 这是我找到的解决方案之一：

    我们可以做的是将每个按钮与我们的喜好对齐，将它们分成几个<ul>与它们相应的引导类。

    在此示例中，我们将 2 个链接右对齐，将brand其居中以及另外两个右对齐链接。

    http://www.bootply.com/SlF4kleQfG

    <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>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Izquierda</a></li>
        <li><a href="#about">Izquierda</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Derecha</a></li>
      <li><a href="#contact">Derecha</a></li>
    </ul>
  </div>
</nav>

    CSS：

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

  3. 一些简单但混乱的事情是将 ul 与一个在引导程序中定义的网格的 div 分开：

    <ul>
 <li></li>
</ul>
<div class="col-md-5"></div>
<ul>
 <li></li>
</ul>

    它对我来说很完美。问候。

    • 0

  4. 如果我没记错的话，有一个类pull-left，并且pull-right为了使拥有该类的组件向右或向左浮动，也有一些 mixin 可以将其包含在 less 中。

    有关更多信息，您可以查看 Helper Classes, Quick Floats部分，您可以在其中找到有关它的更多信息。

    • -1