在下拉菜单中创建水平和垂直菜单
问题描述:
我正在尝试做类似于Chrome的菜单,在下拉菜单中我想要水平菜单和垂直在一起。在下拉菜单中创建水平和垂直菜单
我的代码:
<div id="mobileMenu" >
<ul class="nav">
<li><a href="" data-bypass>1</a></li>
<li><a href="" data-bypass>2</a></li>
<div class="oneLine">
<div class="row-fluid align-center">
<div class="span6">
<li><a href="" data-bypass>3</a></li></div>
<div class="span6">
<li><a href="" data-bypass>4</a></li><div></div>
</div>
</div>
</div>
<li><a href="" data-bypass>5</a></li>
<li><a href="" data-bypass>6</a></li>
<li><a href="" data-bypass>7</a></li>
</ul>
</div>
我想也许我可以创建其他类,并通过不同的跨度除以本,创建具有“3,4”水平一条线,但它没”工作。 我尝试没有跨只是简单的CSS:
.oneLine {
li {
display: inline;
a {
float: left;
clear:both;
width:50%;
border-right: 1px solid #969696;}
}
}
,并没有奏效。 也许你知道该怎么做?
非常感谢!
答
这样做有很多可能性。
检查这一个http://jsfiddle.net/odd1y2nc/1/
<ul>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li class="horizontal">Horizontal</li>
<li>Vertical</li>
<li>Vertical</li>
<li>Vertical</li>
</ul>
ul {
list-style: none;
}
ul li {
float: left;
width: 100%;
}
.horizontal {
width: 33%;
}
+0
感谢您的帮助,在我的情况下,它不想没有.vertical {clear:both;}后水平:) – Sansevna
+0
嗨,Sansevna。我很乐意帮助你。你使用宽度:100%的宽度为李的其余部分? –
没有像出引导框,但下拉菜单组件将是从哪里开始。尝试再次尝试,并指出Bootstrap 2中使用的类,Bootstrap 4将在几个月后发布,所以我会开始熟悉3并使用示例开始 – Christina
我知道Bootstrap 3,但是这个特殊的项目都在Bootstrap 2中,所以我不能改变它。 – Sansevna