How to align links on the left and some on the right in Bootstrap3 Navbar?

S

Sieghardt Meisner2015-11-11 09:57:45

Bootstrap

Sieghardt Meisner, 2015-11-11 09:57:45

In general, I'm just getting acquainted with Bootstrap3, added navbar. There was a need to align the points in it so that one part was on the left, the other on the right. Does not align to the right( How to align them?
Here is the code with comments:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="weidmanns.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <!-- Название компании и кнопка, которая отображается для мобильных устройств группируются для лучшего отображения при свертывание -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <!--<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="D:\Sieggikods\JaRGA\image\logo_777.jpg">
    </a>-->
       
          <!-- Группируем ссылки, формы, выпадающее меню и прочие элементы -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-left"><!--Тут линки, которые должны быть слева-->
              <li class="active"><a href="#">Главная</a></li>
              <li><a href="#">Каталог</a></li>
              <li><a href="#">Производство</a></li>
              <li><a href="#">Новости</a></li>
              <li><a href="#">Статьи</a></li>
              <li><a href="#">Контакты</a></li>			        
            </ul>
            <!--<form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Поиск по сайту">
              </div>
              <button type="submit" class="btn btn-default">Искать</button>
            </form>-->
            <ul class="nav navbar-nav navbar-right"><!--Тут линки, которые должны быть справа-->
              <li><a href="#">Вход</a></li>
              <li><a href="#">Регистрация</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          jkhkhkjh kjhkjh kjk 
        </div>
      </div>
    </header>
    <h1 class="text-center">Hello World</h1>
    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

�

Александр Зачиналов, 2015-11-11
@S1egh4rdt

вы не закрыли
перед

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">