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>

Answer 2

您正在使用班级＆＃34; btn-lg＆＃34;为你的标签。用＆＃34; btn-sm＆＃34;替换它对于小按钮或只是删除正常大小的类。

如果您希望按钮列宽适合将按钮包装在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>

垂直列表的CSS按钮

2 个答案: