Bootstrap - Как сделать кнопки Navbar одинаковой шириной

Question

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

Код Бритва для одной из кнопок выглядит следующим образом (остальные четыре примерно одинаковы):

<a href="#" class="dropdown-toggle btn btn-primary btn-lg" data-toggle="dropdown" style="border-radius: 20px;">Sign up<b class="caret"></b></a> 

Я хотел бы сделать кнопки одинаковой ширины, но я не могу найти CSS, который контролирует это.

Answer 1

Ну, сначала вам нужно выяснить правильный селектор CSS (Chrome Inspect Element может помочь здесь). Я подозреваю, что они, вероятно, вложены в DIV или UL с классом .nav или что-то еще. Затем вы можете просто установить свойство width в вашем файле style.css (или любом другом имени вашей таблицы), или между тегами стиля в вашем HTML.

Если вы можете редактировать HTML, просто добавьте класс, такой как «nav-btn», к каждой кнопке, которую вы хотите изменить.

Так, например, если вы добавили, что вот то, что это будет выглядеть ...

HTML:

<a href="#" class="dropdown-toggle btn btn-primary btn-lg nav-btn" data-toggle="dropdown" style="border-radius: 20px;">Sign up<b class="caret"></b></a> 

CSS:

.nav-btn { 
    width: 50px; //or whatever width/units you like that fits everything 
} 

В качестве альтернативы, вы можете добавить CSS в свой HTML-файл с тегом <style>:

<style> 
    .nav-btn { 
     width: 50px; //or whatever width/units you like that fits everything 
    } 
</style> 

Answer 2

width: 25%; 

(Это больше символов, чтобы соответствовать минимальным требованиям длины ответ)