我想要一个垂直按钮列表,每个按钮的大小相同,而不取决于它们的文本是什么。
这是我到目前为止尝试过的:
<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,但是按钮的尺寸非常大,我说的宽度,它说“那些跨越父级的整个宽度”我不明白这是什么意思
最佳答案
如果按钮太宽,您应该将它们放入容器中并调整容器的大小。如果按钮太高,您可以使用 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>
关于html - css 按钮的垂直列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27314221/