Создание ответной навигационной панели в бутстрапе с помощью двух кнопок

Я хочу создать навигационную панель в бутстрапе, которая имеет 2 варианта. Я хочу, чтобы кнопки занимали 50% экрана. Я установил свой класс div в <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12">Создание ответной навигационной панели в бутстрапе с помощью двух кнопок

Не означает ли это, что на всех таких размерах экрана он будет иметь по 12 столбцов каждый?

Прямо сейчас, когда экран большой (полноэкранный режим на рабочем столе), обе кнопки видны, однако, если я выбираю мобильный вид, кнопки не видны.

Мой код выглядит следующим образом:

<div class="navbar navbar-default" id="subnav" > 
     <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12"> 

      <div class="collapse navbar-collapse" id="navbar-collapse2" style="text-align: center, margin: auto "> 
      <ul class="nav navbar-nav" style=" width: 100%"> 
       <li class="active" style="width: 50%"><a href="#">Posts</a></li> 
       <li><a href="#loginModal" role="button" data-toggle="modal">Login</a></li> 
       </ul> 
      </div> 
     </div> 
    </div>

Обновлено bootply для этого: http://www.bootply.com/T0rLYTBJy2#

Edit:

Я пытаюсь сделать небольшой экран & большой экран выглядят одинаково

источник

2015-11-13 user1692342

Это не ясно, что вы просите. В видовых экранах более 768 пикселей вы можете увидеть одну выпадающую кнопку слева и 3 ссылки справа, под 768px левая кнопка - то же самое, а ссылки обрушиваются и появляется кнопка «navbar-toggle». По умолчанию Bootstrap [Navbar] (http://getbootstrap.com/components/#navbar-default) не предназначен для работы с столбцами, он может, но ваше текущее использование/структура не имеет реальной цели. – vanburen

@vanburen На загрузочном мобильном предварительном просмотре он не показывает 2 кнопки. Я не хочу, чтобы 3 ссылки были справа, поскольку у меня есть только 2 кнопки.Я пытаюсь создать навигационную панель с двумя кнопками, и вся панель навигации покрыта кнопками, ширина 50% для каждой кнопки – user1692342

Вот изображение вашего Boo то на большом вирере ссылки отображаются вместо кнопки справа.

Вот два способа вы могли бы сделать это: один, используя текущую структуру, но делает мобильную навигацию «постоянный» во всех видовых.

Второй способ состоит только в использовании двух выпадающих кнопок, которые занимают всю навигационную панель.

См. Рабочие фрагменты на полной странице.

Пример 1: Текущая структура только для мобильных телефонов navbar.

/* CSS used here will be applied after bootstrap.css */ 
 

 
.navbar-default .navbar-nav > .active > a, 
 
.navbar-default .navbar-nav > li:hover > a { 
 
    border: 0 solid #4285f4; 
 
    border-bottom-width: 2px; 
 
    font-weight: 800; 
 
    background-color: transparent; 
 
} 
 
@media (max-width: 2500px) { 
 
    .navbar-default .navbar-header { 
 
    float: none; 
 
    } 
 
    .navbar-default .navbar-left, 
 
    .navbar-default .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .navbar-default .navbar-toggle { 
 
    display: block; 
 
    } 
 
    .navbar-default .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .navbar-default.navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .navbar-default .navbar-collapse.collapse { 
 
    display: none!important; 
 
    } 
 
    .navbar-default .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .navbar-default .navbar-nav>li { 
 
    float: none; 
 
    } 
 
    .navbar-default .navbar-nav>li>a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .navbar-default .collapse.in { 
 
    display: block !important; 
 
    } 
 
    .navbar-default .navbar-nav .dropdown-menu > li > a, 
 
    .navbar-default .navbar-nav .dropdown-menu > li > a:hover, 
 
    .navbar-default .navbar-nav .dropdown-menu > li > a:focus { 
 
    color: #777; 
 
    } 
 
    .navbar-default .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default" id="subnav"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> <a href="#" style="margin-left:15px;" class="navbar-btn btn btn-default btn-plus dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-home" style="color:#dd1111;"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small></a> 
 

 
     <ul class="nav dropdown-menu"> 
 
     <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a> 
 

 
     </li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a> 
 

 
     </li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a> 
 

 
     </li> 
 
     <li class="nav-divider"></li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a> 
 

 
     </li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a> 
 

 
     </li> 
 
     </ul> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse2"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="active"><a href="#">Posts</a> 
 

 
     </li> 
 
     <li><a href="#loginModal" role="button" data-toggle="modal">Login</a> 
 

 
     </li> 
 
     <li><a href="#aboutModal" role="button" data-toggle="modal">About</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

Пример 2: Только два DropDown кнопки.

.no-gutter >[class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.navbar-custom .btn.btn-nv { 
 
    border-radius: 0; 
 
    height: 50px; 
 
    margin: 0; 
 
    border: 0; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
} 
 
.navbar-custom .btn.btn-nv:first-child { 
 
    border-right: 1px solid rgba(0, 0, 0, .075) 
 
} 
 
.navbar-custom .dropdown .dropdown-menu { 
 
    width: 100%; 
 
    border-radius: 0; 
 
} 
 
.navbar-custom .dropdown .dropdown-menu-right { 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-static-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
     <div class="col-xs-6"> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-default navbar-btn btn-block dropdown-toggle btn-nv" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="glyphicon glyphicon-home" style="color:#dd1111;"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small> 
 

 
      </button> 
 
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a> 
 

 
      </li> 
 
      <li class="nav-divider"></li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a> 
 

 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <div class="dropdown"> 
 
      <button class="btn btn-default navbar-btn btn-block dropdown-toggle btn-nv" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="glyphicon glyphicon-home" style="color:#dd1111;"></i> Home <small><i class="glyphicon glyphicon-chevron-down"></i></small> 
 

 
      </button> 
 
      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1"> 
 
      <li><a href="#"><i class="glyphicon glyphicon-user" style="color:#1111dd;"></i> Profile</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-dashboard" style="color:#0000aa;"></i> Dashboard</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-inbox" style="color:#11dd11;"></i> Pages</a> 
 

 
      </li> 
 
      <li class="nav-divider"></li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-cog" style="color:#dd1111;"></i> Settings</a> 
 

 
      </li> 
 
      <li><a href="#"><i class="glyphicon glyphicon-plus"></i> More..</a> 
 

 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Just Buttons: это должно дать вам базу, чтобы стиль, как вам хотелось бы.

.navbar.navbar-custom { 
 
    background-color: transparent; 
 
} 
 
.no-gutter >[class*='col-'] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
} 
 
.navbar-custom .btn.btn-nv { 
 
    border-radius: 0; 
 
    height: 50px; 
 
    margin: 0; 
 
    border: none; 
 
} 
 
.navbar-custom .btn.btn-nv:hover, 
 
.navbar-custom .btn.btn-nv:focus, 
 
.navbar-custom .btn.btn-nv:active, 
 
.navbar-custom .btn.btn-nv.active, 
 
.open > .dropdown-toggle.btn-nv { 
 
    border: 0 solid #4285f4; 
 
    border-bottom-width: 2px; 
 
    font-weight: 800; 
 
    background-color: transparent; 
 
    outline: none; 
 
} 
 
.navbar-custom .btn.btn-nv:first-child { 
 
    border-right: 1px solid rgba(0, 0, 0, .075); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-static-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
     <div class="col-xs-6"> 
 
     <button class="btn btn-default navbar-btn btn-block btn-nv" type="submit">Posts</button> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <button class="btn btn-default navbar-btn btn-block btn-nv" type="submit">Login</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

источник

2015-11-13 05:04:50 vanburen

Мне очень жаль, но ссылка, которую я имел, была поверх уже существующей ссылки на загрузку и, следовательно, вы видели у меня другой код. Я создал новую ссылку: http://www.bootply.com/T0rLYTBJy2# – user1692342

Создание ответной навигационной панели в бутстрапе с помощью двух кнопок

ответ

Смежные вопросы