Упорядочивать элементы navbar

Как я могу размещать элементы одного navbar по мере того, как они остались довольно размещенными, и что последний элемент остался в конце navbar? Излишне место между последним элементом и концом navbar и не видят очень хорошо.

Это мой код (нажимать на "Полной странице", чтобы видеть ошибку):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default navbar-inverse " >
  <div class="navbar-header " id="navigation">
    <ul class="nav nav-pills ">
       <li role="presentation" class="pull-left active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="pull-left active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="pull-right active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>

Дисплей остается таким:

introducir la descripción de la imagen aquí

1
задан 06.04.2016, 06:15
2 ответа

Ты можешь пытаться со следующим cГіdigo, я добавил nav-justified и удаленный nav-pills :

<nav class="navbar navbar-default navbar-inverse " >
  <div class="navbar-header " id="navigation">
    <ul class="nav nav-justified">
       <li role="presentation" ><a href="index.html">INICIO</a></li>
       <li role="presentation" ><a href="pacas.html">VENTA DE ROPA EN PACAS</a></li>
       <li role="presentation" ><a href="varon.html">VENTA DE ROPA PARA VARON</a></li>
       <li role="presentation" ><a href="dama.html">VENTA DE ROPA PARA DAMA</a></li>
       <li role="presentation" ><a href="nino.html">VENTA DE ROPA PARA NIÑO</a></li>
   </ul>
 </div>
</nav>

SГіlo остается налаживать цвета твоего предпочтения и уменьшать стоимость min-height из класса
.navbar , по умолчанию он 50px.

типов Привета!

1
ответ дан 24.11.2019, 14:38
  • 1
    большое спасибо они служили мне очень большим количеством помощи, как я могу изменять min-height с css? он был бы .navbar {min-height: 30px;} realize этот код, но он не меняет tama и # 241; или li, и цветов даже не, поскольку изменять их они могли бы помогать мне в этой теме? он им был бы благодарен очень много они подали мне многого Вашу помощь! – Alejandro Ruiz 06.04.2016, 09:04
  • 2
    Я рекомендую тебе создавать второй файл CSS для тебя c и # 243; я говорю настроенный, его могут звать custom.css или сходно, ты должен добавлять это под соединением Bootstrap . Ты c и # 243; я говорю, что он правилен. – AlejandroVega 06.04.2016, 11:07
  • 3
    Чтобы менять цвет фона и цвет текста использует классы .nav> li> в и .nav> li> a:hover . Ты быть и # 225; большой утилиты такой инструмент как Firebug или сходный, чтобы инспектировать c и # 243; я говорю шрифт тебя p и # 225; gina в браузере. – AlejandroVega 06.04.2016, 11:23

Конечно есть достаточно методов, чтобы решать эту проблему. Здесь я оставляю пару возможных альтернатив, если ты хочешь, чтобы у него были все элементы сам или различная ширина.

1) Все элементы с тем же размером

Ты мог бы использовать nav-justified что делает, что все элементы nav займите ту же ширину в отце (и в окнах / экранах меньше 768 pixels он показывает их в вертикальном одни на других).

Заметь: как он показывается в самой ссылке наверху, nav-justified не будь вынесен совсем и представь вирусы в Safari.

Я воспользовался возможностью, чтобы отлаживать немного ненужных классов. С этими изменениями код был бы таким:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default navbar-inverse " >
  <div class="navbar-header " id="navigation">
    <ul class="nav nav-pills nav-justified">
       <li role="presentation" class="active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>

2) Элементы с различным размером

В этом случае то, что мы сделали бы, состоит в том, чтобы делать, что ul имейте один display:table, и li один display:table-cell. Так они будут вести себя как будто это были ячейки таблицы и браузер распространит их, как он смог, чтобы приспосабливаться к ширине экрана.

Код остался бы таким:

ul.nav { display:table; width:100%; }
ul.nav > li { display:table-cell; float:none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default navbar-inverse " >
  <div id="navigation">
    <ul class="nav nav-pills">
       <li role="presentation" class="active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>
1
ответ дан 24.11.2019, 14:38