内置多个链接的Bootstrap下拉项

Question

因为Bootstrap下拉项具有以下结构：

<ul class="dropdown-menu">
    <li><a href="linkt/to/item1">Item1</a></li>
</ul>

无法在同一项目中放置包含多个链接字词的文字。类似的东西：

<ul class="dropdown-menu">
    <li>This <a href="linkt/to/item1">Item</a> 
        is a part of <a href="linkt/to/page1">Page1</a>
    </li>
</ul>

还有其他选择可以实现吗？

Answer 1

将<li>内容包装到<span>：

<li><span>This <a href="linkt/to/item1">Item</a> 
    is a part of <a href="linkt/to/page1">Page1</a>
</span></li>

并添加以下CSS以防止wordwrapping：

.dropdown-menu li span {
    white-space: nowrap;
    padding-left: 5px;
    padding-right: 5px;
}

填充仅适用于眼睛:)演示 - ＆gt;的 http://jsfiddle.net/prw73rL9/