Bootstrap - 如何将下拉列表 ul>li 列表拆分为两列?
我正在尝试将 ul>li 分成两列,以便一列向左对齐,另一列向右对齐。
我是这样做的
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">big button</button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu text-left">
<li><a href="#">full name must align to left <span class="text-right">short name - align to right</span></a></li>
<li><a href="#">left <span class="text-right">right</span></a></li>
<li><a href="#">left<span class="text-right">right</span></a></li>
<li><a href="#">full name must align to left <span class="text-right">short name - align to right</span></a></li>
</ul>
</div>
但它都将离开。 那么我如何将 ul>li> 超链接拆分为两列,以便一半部分左对齐,另一半部分右对齐
最佳答案
这是解决方案,请检查以下链接:
- > Demo
HTML:
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Multicolumn</a>
<div class="dropdown-menu" role="menu">
<ul>
<li><a>one</a></li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
<ul>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
<ul><li>eight</li>
</ul>
</div>
</div>
CSS:
.dropdown-menu ul {
float: left;
}
.dropdown-menu ul:first-of-type {
border-right: 1px solid black;
padding-right:20px
}
关于javascript - Bootstrap - 如何在两列中拆分和对齐下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20812409/