Question

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

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

部分代码：

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

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

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

*我没有足够的代表来上传图片..＆gt;。＆lt;

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

Answer 2

我自己的问题的答案是......删除引导程序。删除了bootstrap并为所有li提供了精确的填充值...并且它有效。

感谢您的努力：D

Bootstrap列宽

2 个答案: