背景效果 同尺寸

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 元素。如果你想要更细粒度的控制，你可能想要在这些按钮或其包含列表上放置一个特定的 class，这样你就可以只针对这个实例。

Answer 2

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

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

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

Answer 3

更好的方法是像这样向 link 添加一个 id http://jsfiddle.net/1shzc3bh/1/ 并在那里添加一个宽度

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