Bootstrap 列宽

Question

我有一个菜单，里面有一个 ul，有 8 个 li。我在这里使用 bootstrap，所以最后，他们最多使用 11 个列（col-md-1 等...）问题是它们的宽度。它们中的大多数（由于其中单词的长度）都有适当的边距，但有两个不是。

基本上我需要调整列宽以在 li 中包含更多 space，但我无法...

部分代码：

<li class="lastItem col-md-1"> <a href="#">Contacts</a></li>

谢谢你，抱歉我的英语不好..

这是 li 之一，我需要增加它的宽度，以便它在边框和单词之间获得适当的间距

*我没有足够的代表来上传图片..>.<

http://postimg.org/image/72ma5sh05/

Answer 1

col-md-1 不是通常分配给 <li> 结构的 class。我想你想做的是这样的：

// Using the Grid System
<div class="row">
  <div class="col-md-1">
    <a href="#">Contacts</a>
  </div>
  <div class="col-md-1">
    <a href="#">Something</a>
  </div>
  <div class="col-md-1">
    <a href="#">Another Thing</a>
  </div>
  <div class="col-md-1">
    <a href="#">One More Thing</a>
  </div>
</div>

// Using the ul/li System (Exactly the same)
<ul class="list-inline">
  <li class="col-md-1"><a href="#">Contacts</a></li>
  <li class="col-md-1"><a href="#">Something</a></li>
  <li class="col-md-1"><a href="#">Something Else</a></li>
  <li class="col-md-1"><a href="#">One More Thing</a></li>
</ul>

这样，列将正确对齐并根据浏览器的大小调整大小 window。 <ul><li>... 结构很好，但它的响应方式不同，因此将 col-md-* class 分配给它并不是最好的主意。

查看此 Bootply 以查看代码的示例：

Bootply

Answer 2

我自己的问题的答案是...删除 bootstrap。删除了 bootstrap 并为所有 li 提供了精确的填充值......并且它起作用了。

感谢您的努力:D

Bootstrap 列宽

Bootstrap column width

html

css

twitter-bootstrap