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-right, если li идет вправо, а .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чтобы компонент, владеющий этим классом, плавал вправо или влево, также есть миксины, чтобы включить это в less.

    Для получения дополнительной информации вы можете проверить раздел Helper Classes, Quick Floats , где вы можете найти больше информации об этом.

    • -1