вертикальный список кнопок css

Question

Я хочу иметь список вертикальных кнопок, расположенных выше друг друга одинакового размера, не зависящих от их текста.

это то, что я пытался до сих пор:

<a class="btn btn-primary btn-lg btn-block" href="http://localhost:11555/category" role="button">category</a> 
    <a class="btn btn-default btn-lg btn-block" href="http://localhost:11555/Team" role="button">Teams</a> 
    <a class="btn btn-primary btn-lg btn-block" href="http://localhost:11555/tournament" role="button">Tournaments</a> 
    <a class="btn btn-default btn-lg btn-block" href="http://localhost:11555/game" role="button">Games</a> 
    <a class="btn btn-primary btn-lg btn-block" href="http://localhost:11555/News" role="button">News</a> 
    <a class="btn btn-default btn-lg btn-block" href="http://localhost:11555/Ads" role="button">ADS</a> 

с использованием начальной загрузки, но размер кнопки очень большой, ширина им говорить о том, что говорит: «те, которые охватывают всю ширину родитель "Я не понимаю, что это значит

Answer 1

Если кнопки ширины, вы должны поместить их в контейнер и отрегулировать размер контейнера. Если кнопки являются высоко вы можете использовать btn-sm вместо btn-lg:

<div id="buttonContainer" style="width:200px; <!--Change this for more or less width!-->"> 
    <a class="btn btn-primary btn-lg btn-block" href="http://localhost:11555/category" role="button">category</a> 
    <a class="btn btn-default btn-lg btn-block" href="http://localhost:11555/Team" role="button">Teams</a> 
    <a class="btn btn-primary btn-lg btn-block" href="http://localhost:11555/tournament" role="button">Tournaments</a> 
    <a class="btn btn-default btn-lg btn-block" href="http://localhost:11555/game" role="button">Games</a> 
    <a class="btn btn-primary btn-lg btn-block" href="http://localhost:11555/News" role="button">News</a> 
    <a class="btn btn-default btn-lg btn-block" href="http://localhost:11555/Ads" role="button">ADS</a> 
</div> 

Answer 2

Вы используете класс «БТН-ДЖИ» для вас тегов. замените его на «btn-sm» для маленьких кнопок или просто удалите этот класс для нормального размера.

Если вы хотите, чтобы ширина столбцов кнопок соответствовала обертке кнопки в теге div и применяла класс столбца бутстрапа к этому div.

<div class="col-md-12"> 
    <div class="col-md-2"> 
     .....you buttons here 
    </div> 
    <div class="col-md-10"> 
     .... some other content 
    </div> 
<div>