Question

Bootstrap - 如何在两列中拆分下拉列表ul＆gt; li列表？

我正在尝试将ul＆gt; 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>

http://jsfiddle.net/W55vP/

但它全都要走了。那我怎么能分开ul＆gt; li＆gt;超链接到两列，使半部分左对齐，其他部分对齐

Answer 1

以下是解决方案，请查看以下链接：

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
}

Bootstrap - 如何在两列中拆分和对齐下拉列表？

1 个答案: