html - Bootstrap 列宽

Question

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

基本上我需要调整列宽以在 li 中留出更多空间，但我无法...

部分代码:

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

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

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

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

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

Answer 1

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

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

这样，列将正确对齐并根据浏览器窗口的大小调整大小。 <ul><li>...结构很好，但它没有以同样的方式响应，所以分配 col-md-*上课不是最好的主意。

查看此 Bootply 以查看代码的实际示例:

Bootply