Как сделать NavBar вещей фиксированной шириной в Bootstrap 3

Question

Я пытаюсь произвести Navbar, подобный тому, на этой странице:

http://wrapbootstrap.com/preview/WB0375140

Я использую Bootstrap 3 и могу создать верхний угол округлого коробки с небольшим градиентом внизу достаточно легкие.

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

Я почесываю голову, пытаясь выяснить, как это делается - И идеи, которые высоко ценятся.

Answer 1

Вы должны добавить свойство ширины CSS для всех элементов на панели навигации.

Если предположить, что Navbar что-то вроде этого:

<div id="myCustomNavbar"> 
    <ul> 
     <li class="active">Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

Вы должны добавить некоторый стиль с помощью CSS:

#myCustomNavbar > ul > li 
{ 
    width: 100px !important; 
} 

Помните, что вы всегда можете щелкнуть правой кнопкой мыши элемент, который вы заинтересованы в (в образец веб-страницы) и нажмите «Проверить элемент». Там вы можете увидеть все стили html-разметки и стилей, примененные к этому элементу.