html - 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>

使用 bootstrap，但是按钮的尺寸非常大，我说的宽度，它说“那些跨越父级的整个宽度”我不明白这是什么意思

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>