背景影响大小相同

Question

我想列出一些名字。

但我需要把所有的大小相同。

我如何使用bootstrap制作相同尺寸的背景？

<ul class="list-unstyled"> 
    <li> 
    <a class="btn btn-xs btn-warning"> 
     <span >Loren ipsum</span> 
    </a> 
    </li> 
    <li> 
    <a class="btn btn-xs btn-warning"> 
     <span >Lorem ipsunis</span> 
    </a> 
    </li> 
    <li> 
    <a class="btn btn-xs btn-warning"> 
     <span >Lorem ip</span> 
    </a> 
    </li> 
</ul> 

守则的jsfiddle http://jsfiddle.net/novasdream/d3fkoeee/

Answer 1

你需要对这些元素的宽度或最小宽度。如果按钮内容有可能变长，Min-width会更安全一些。像这样的事情在你的CSS会做到这一点：

.btn-xs { 
    min-width: 15em; 
} 

注：1EM大约是在使用的字体一个“M”字符的宽度，所以我建议你看你的实际文本内容找到一个适当的宽度。 （15只是一个数字，我抓住了空气。）

此外，请记住，如果创作如上，这种风格将适用于任何.btn-xs元素。如果你想要更细致的控制，你可能需要在这些按钮或其包含的列表上放置一个特定的类，这样你只能定位这个实例。

Answer 2

使.btn链接display:block，使它们成为父li的宽度的100％。根据需要调整您的ul。

.list-unstyled li a.btn {display:block;} 

http://jsfiddle.net/d3fkoeee/4/

Answer 3

一种更好的方式。将一个id添加到链接一个像这样http://jsfiddle.net/1shzc3bh/1/并添加宽度有

例如a#button{width:100px;!important }