Bootstrap 并排显示 LI

Question

如何并排显示 LI.parent？

我正在使用 Bootstrap 3，我的 HTML 是：

<ul role="menu" class="dropdown-menu">

<li class="item-001 dropdown parent">
    <a href="/abc">ABC</a>
    <ul role="menu" class="dropdown-submenu">
        <li class="item-1">
            <a href="/abc/1">Link 1</a>
        </li>
        <li class="item-2">
            <a href="/abc/2">Link 2</a>
        </li>
        <li class="item-3">
            <a href="/abc/3">Link 3</a>
        </li>
        <li class="item-4">
            <a href="/abc/4">Link 4</a>
        </li>
    </ul>
</li>

<li class="item-002 dropdown parent">
    <a href="/abc">DEF</a>
    <ul role="menu" class="dropdown-submenu">
        <li class="item-1">
            <a href="/def/1">Link 1</a>
        </li>
        <li class="item-2">
            <a href="/def/2">Link 2</a>
        </li>
        <li class="item-3">
            <a href="/def/3">Link 3</a>
        </li>
        <li class="item-4">
            <a href="/def/4">Link 4</a>
        </li>
    </ul>
</li>

<li class="item-003 dropdown parent">
    <a href="/abc">GHI</a>
    <ul role="menu" class="dropdown-submenu">
        <li class="item-1">
            <a href="/ghi/1">Link 1</a>
        </li>
        <li class="item-2">
            <a href="/ghi/2">Link 2</a>
        </li>
        <li class="item-3">
            <a href="/ghi/3">Link 3</a>
        </li>
        <li class="item-4">
            <a href="/ghi/4">Link 4</a>
        </li>
    </ul>
</li>

</ul>

Answer 1

要并排放置 li 个元素，您只需在 CSS 中使用左浮动，如下所示：

.dropdown {
    float: left;
}

Bootstrap 并排显示 LI

Bootstrap Show LI side by side

css

twitter-bootstrap-3