Question

我有一个引导菜单，我想使用宽度相等的菜单项（使用网格）。我的问题是，我无法在ul和li元素之间添加行类，但我需要这样的内容：

<ul class="nav navbar-nav col-sm-6">
    <li class="col-sm-4"><a href="#">Menu 1</a></li>
    <li class="col-sm-4"><a href="#">Menu 2</a></li>
    <li class="col-sm-4"><a href="#">Menu 3</a></li>
</ul>

有谁知道如何解决这个问题？

Answer 1

就像泰德上面说的那样，你所拥有的东西会起作用但这听起来也像你想要增加一个空间或间隙。

如果是这样，为什么不添加... 确保在col-lg-x中允许额外的宽度。

<style>
.gapit {
    width:1%;
    background-color: blueviolet;
    height:50px;
  }
</style>
<li class="col-lg-2"><a href="#">Home</a></li>
<li class="gapit"></li>  
<li class="col-lg-2"><a href="#about">About</a></li>
<li class="gapit"></li>  
<li class="col-lg-2"><a href="#contact">Contact</a></li>

或者如果您不想这样做，那么只需在右边添加一些边距就可以了...

<style>
.padit {
    margin-right:1%; 
  }
</style>
<li class="col-lg-2 padit"><a href="#">Home</a></li>
<li class="col-lg-2 padit"><a href="#about">About</a></li>
<li class="col-lg-2"><a href="#contact">Contact</a></li>

具有相同菜单项的Bootstrap菜单

1 个答案: