2016-12-21 2 views
1
<div class="container"> 
<div class="btn-group-vertical"> 
<a href="3overview.php" class="btn btn-primary">Overview</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<br> 
<a href="" class="btn btn-warning">Button</a> 
<a href="" class="btn btn-danger">Button</a> 
</div> 
</div> 

Я пытаюсь сделать так, эти кнопки полноширинные контейнера, что они находятся в России, но я не могу заставить его работать, у меня есть попробовал .btn-group-justified, но ничего не работает с .btn-group-vertical. Может кто-нибудь помочь?Bootstrap кнопки полная ширина .btn-группа вертикального

РЕДАКТИРОВАТЬ 11/28/2017: Отмечен принятый ответ и исправлен определенный опечаток, который я нашел.

ответ

4

У btn-group-vertical есть ширина автоматического набора 85px, насколько я могу видеть. Устанавливая его на 100%, исправляет вашу проблему. Это должно быть сделано в таблице стилей, но под это инлайн решение:

<div class="container"> 
<div class="btn-group-vertical" style="width: 100%;"> 
<a href="3overview.php" class="btn btn-primary">Overview</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<a href="" class="btn btn-primary">Button</a> 
<br> 
<a href="" class="btn btn-warning">Button</a> 
<a href="" class="btn btn-danger">Button</a> 
</div> 
</div> 

EDIT: Хотя это работает, я бы с Vlads ответить вместо этого. Это лучше, чем мое. И работает. Хотя вам не нужно добавлять класс к отдельным кнопкам. Достаточно добавить класс в группу кнопок. Пример:

<div class="container"> 
    <div class="btn-group-vertical btn-block" style="width: 100%;"> 
     <a href="3overview.php" class="btn btn-primary">Overview</a> 
     <a href="" class="btn btn-primary">Button</a> 
     <a href="" class="btn btn-primary">Button</a> 
     <a href="" class="btn btn-primary">Button</a> 
     <br> 
     <a href="" class="btn btn-warning">Button</a> 
     <a href="" class="btn btn-danger">Button</a> 
    </div> 
</div> 
0

Чтобы сделать кнопку полной ширины, просто добавьте btn-block класс в кнопку. Взгляните на это - Example

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