css按鈕的垂直列表

我想要一個垂直按鈕的列表，它們的大小相同而不依賴於它們的文本。css按鈕的垂直列表

這是我到目前爲止已經試過：

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

使用引導，但按鈕的尺寸非常大，寬度IM說起，它說：「那些跨越的整個寬度父母「我不明白這是什麼意思

來源

2014-12-05 mohammad

這裏似乎對準垂直校正[小提琴]（http://jsfiddle.net/nmme0aj7/） – 2014-12-05 10:52:50

我知道這是垂直對準我有我怎樣才能改變自己的尺寸按鈕的尺寸有問題？ – mohammad 2014-12-05 10:55:00

看一看[這裏]（http://jsfiddle.net/nmme0aj7/4/） – 2014-12-05 10:55:46

如果按鈕的寬度，你應該把它們放在一個容器中，並調整容器的大小。如果按鈕高，你可以使用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>

來源

2014-12-05 10:56:40

不需要使用內聯css。他正在使用bootstrap – astroanu 2014-12-05 11:03:31

您使用的是類「BTN-LG」爲你的標籤。用小按鈕替換爲「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>

來源

2014-12-05 10:58:15 astroanu

css按鈕的垂直列表

回答

相關問題