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

您需要在这些元素上设置宽度或最小宽度。如果按钮内容有可能变长，最小宽度会更安全一些。在你的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/，然后添加一个宽度

e.g。 a#button{width:100px;!important }

背景效果相同的大小

3 个答案: