2

Как можно убрать один из элементов в Bootstrap navbar что бы он был в развернутом варианте и его не было в варианте collapsed? Нужно что бы было Логин/Регистрация были на одном уровне и в свернутом и в развернутом виде, или что бы слеш пропадал в свернутом виде. Пробовал соеденить элементы в группу кнопок - не помогает + рушит оформление, и через hidden спрятать по идее тоже нельзя(как я понял оно работает только в сетке, а если добавлять в navbar сетку оформление тоже рушится).

Не свернутое меню: Не свернутое меню

Свернутое меню:

Свернутое меню

Нужно получить надпись как на первом скрине или избавится от слеша в свернутом варианте. HTML

     <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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" href="#">All Categories</a> </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav navbar-left">
                        <li style="padding-right: 0">
                            <a class="btn" href="#" style="padding-right: 0"><i class="glyphicon glyphicon-user fa-lg"></i>Login</a></li>
                        <li class="navbar-text">
                            <p>/</p>
                        </li>
                        <li><a href="#" style="padding-left: 0">Registration</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-left">
                        <li class="active"><a href="#"><i class="fa fa-envelope-open fa-lg" aria-hidden="true"></i><strong>Can't find what you need?</strong><span class="sr-only">(current)</span></a> </li>
                    </ul>
                    <form class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button>
                    </form>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

2 ответа 2

2

Вариант 1, просто убрать слеш:

.separ {
  display: block;
}

.navbar-nav li {
  text-align: center;
}


@media (max-width: 768px) {
  .separ {
    display: none;
  }
  
  .navbar-nav li a {
    padding: 10px 15px !important;
  }
}
  <script src="https://code.jquery.com/jquery-2.0.3.js"></script>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
  
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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" href="#">All Categories</a> </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-left">
        <li style="padding-right: 0">
          <a class="btn" href="#" style="padding-right: 0"><i class="glyphicon glyphicon-user fa-lg"></i>Login</a></li>
        <li class="navbar-text">
          <p class="separ">/</p>
        </li>
        <li><a href="#" style="padding-left: 0">Registration</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#"><i class="fa fa-envelope-open fa-lg" aria-hidden="true"></i><strong>Can't find what you need?</strong><span class="sr-only">(current)</span></a> </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Вариант 2, убрать весь блок с разделителем:

.navbar-nav li {
  text-align: center;
}


@media (max-width: 768px) {
  .nav>li.navbar-text {
    display: none;
  }
  
  .navbar-nav li a {
    padding: 10px 15px !important;
  }
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
  
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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" href="#">All Categories</a> </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-left">
        <li style="padding-right: 0">
          <a class="btn" href="#" style="padding-right: 0"><i class="glyphicon glyphicon-user fa-lg"></i>Login</a></li>
        <li class="navbar-text">
          <p>/</p>
        </li>
        <li><a href="#" style="padding-left: 0">Registration</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#"><i class="fa fa-envelope-open fa-lg" aria-hidden="true"></i><strong>Can't find what you need?</strong><span class="sr-only">(current)</span></a> </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Вариант 3, вынести из коллапса:

.navbar-nav li {
  text-align: center;
}


@media (max-width: 768px) {
  .navbar-nav li a {
    padding: 10px 15px !important;
  }
  
  .nav>li.navbar-text {
    display: none;
  }
}
  <script src="https://code.jquery.com/jquery-2.0.3.js"></script>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
  
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
        <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" href="#">All Categories</a> </div>

    <ul class="nav navbar-nav navbar-left">
      <li style="padding-right: 0">
        <a class="btn" href="#" style="padding-right: 0"><i class="glyphicon glyphicon-user fa-lg"></i>Login</a></li>
      <li class="navbar-text">
        <p>/</p>
      </li>
      <li><a href="#" style="padding-left: 0">Registration</a></li>
    </ul>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">



      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#"><i class="fa fa-envelope-open fa-lg" aria-hidden="true"></i><strong>Can't find what you need?</strong><span class="sr-only">(current)</span></a> </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>


Вариант 4, в одну строку (внутри колапс):

.navbar-nav li {
  text-align: center;
}


@media (max-width: 768px) {
  .navbar-nav li a {
    padding: 10px 15px !important;
  }
  
  .nav.navbar-left {
    text-align: center;
  }
  
  .nav.navbar-left>li {
    display: inline-block;
  }
}
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
  
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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" href="#">All Categories</a> </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-left">
        <li style="padding-right: 0">
          <a class="btn" href="#" style="padding-right: 0"><i class="glyphicon glyphicon-user fa-lg"></i>Login</a></li>
        <li class="navbar-text">
          <p>/</p>
        </li>
        <li><a href="#" style="padding-left: 0">Registration</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#"><i class="fa fa-envelope-open fa-lg" aria-hidden="true"></i><strong>Can't find what you need?</strong><span class="sr-only">(current)</span></a> </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>


2
  • А можно для полной картины пример того, как разместить в свернутом варианте логин\регистрация в одну строку?
    – Maryen
    21 ноя 2016 в 18:43
  • @Maryen, добавила вариант 4
    – SVE
    21 ноя 2016 в 18:51
2

Можно, например, внести обе кнопки и / в один <li> и добавить float. В этом случае они будут на одной строке

.twin > a {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">All Categories</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li class="twin clearfix">
          <a href="#" style="padding-right: 0"><i class="glyphicon glyphicon-user fa-lg"></i> Login</a>
          <a> / </a>
          <a href="#" style="padding-left: 0">Registration</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-left">
        <li class="active">
          <a href="#">
            <i class="fa fa-envelope-open fa-lg"></i>
            <strong>Can't find what you need?</strong>
          </a>
        </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">
          <i class="fa fa-search fa-lg" aria-hidden="true"></i>
        </button>
      </form>
    </div>
  </div>
</nav>

Еще, например, использовать встроенный класс hidden-xs и просто скрыть / при переходе меню в режим гамбургера.

@media(min-width: 768px) {
 .login {
   padding-right: 0 !important;
 }
 .register { 
   padding-left: 0 !important;
 } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">All Categories</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li>
          <a href="#" class="login"><i class="glyphicon glyphicon-user fa-lg"></i> Login</a>
        </li>
        <li class="navbar-text hidden-xs">
          <span>/</span>
        </li>
        <li>
          <a href="#" class="register">Registration</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-left">
        <li class="active">
          <a href="#">
            <i class="fa fa-envelope-open fa-lg"></i>
            <strong>Can't find what you need?</strong>
          </a>
        </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">
          <i class="fa fa-search fa-lg" aria-hidden="true"></i>
        </button>
      </form>
    </div>
  </div>
</nav>

2
  • hidden-xs спрячет же вообще элемент при выставленном медиа запросе?
    – Maryen
    21 ноя 2016 в 18:42
  • @Maryen меню переключается в гамбургер при < 768px, hidden-xs прячет на < 768px. Что вы подразумеваете под "при выставленном медиа запросе" ?
    – Andrew B
    21 ноя 2016 в 19:13

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.