下拉ul中的Bootstrap div

Question

我使用的是模板引擎，因此在Bootstrap 3下拉菜单中必须有一个div（或一些标记）。

当我这样做时，格式化就不合时宜了：

的jsfiddle

这是我的示例代码：

 <div class="row">
    <div class="col-lg-2">
         <h1> Dropdown Test</h1>

        <button data-toggle="dropdown">Dropdown</button>
        <ul class="dropdown-menu" role="menu">
            <li><a>test</a>

            </li>
            <li><a>test2</a>

            </li>
            <div>
                <li><a>test3</a>

                </li>
            </div>
        </ul>
    </div>
</div>

Answer 1

的jsfiddle

Bootstrap下拉菜单在设置CSS时是特定的：

.dropdown-menu > li > a {
    clear: both;
    color: #333;
    display: block;
    font-weight: normal;
    line-height: 1.42857;
    padding: 3px 20px;
    white-space: nowrap;
}

如果您偏离ul-li-a命令，则需要包括其他CSS规则。 这就是为什么SASS / LESS很好。 它们可以轻松地将CSS规则扩展到其他元素/类，而无需太多额外的标记； 但是，目前我不会演示SASS或LESS，只需看一下您可以在页面中包含的CSS，如下所示：

一世'

/* notice the missing '>' before the 'a' */
.dropdown-menu > li a {
    clear: both;
    color: #333;
    display: block;
    font-weight: normal;
    line-height: 1.42857;
    padding: 3px 20px;
    white-space: nowrap;
}
/*  change colors, remove underline and turn on pointer */
.dropdown-menu > li a:hover, .dropdown-menu > li a:focus {
    background-color: #f5f5f5;
    color: #262626;
    cursor: pointer;
    text-decoration: none;
}

您的HTML也是无效的，并且没有遵守Bootstrap设置。 要更新标记，您需要包含.container和.btn-group 。 另外， div与li处于同一级别，这不是优选/不允许的。 最后，我为UX样式添加了一个下拉箭头。

<div class="container">
    <div class="row">
        <div class="col-lg-2">
            <h1>Dropdown Test</h1>
            <div class="btn-group">
                <button type="button" 
                        class="btn btn-default dropdown-toggle" 
                        data-toggle="dropdown" 
                        aria-haspopup="true"
                        >Dropdown <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a>test</a></li>
                    <li><a>test2</a></li>
                    <li>
                        <div><a>test3</a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

有一个警告，上面是一个示例，可能不建议在生产中使用。 您正在将CSS应用于嵌套在dropdown-menu li中的所有链接。 如果您有多层嵌套，则该样式将应用于所有这些链接； 因此，考虑修改CSS选择器，或者在锚链接上使用一个类。

Answer 2

正确的方法如下所示：

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3
     <ul>
       <li>Sub-Item 1</li>
       <li>Sub-Item 2</li>
     </ul>
   </li>
</ul>

Answer 3

因此，我将扩大我的评论以及belinus在说什么。 我仍然不认为这是最好的方法，但至少可能是一个临时解决方案。 我会像belinus所说的那样将其放在ul（而不是div）中，但是我不认为ul可以是另一个ul的孩子而又不被另一个li困住（ 请参阅有关该帖子的文章 ），所以这里是我认为它将是什么样子：

<ul class="dropdown-menu" role="menu">
    <li><a>test</a></li>
    <li><a>test2</a></li>
    <li>
        <ul id="test">
            <li><a>test3</a></li>
        </ul>
    </li>
</ul>

然后您可以在该ul中添加一些CSS。 在您的小提琴中，我只添加了20px，它在我看来像是对齐的：

#test {
    padding-left: 20px;
}

希望这会有所帮助。

Answer 4

您不能直接在<ul>内部使用<div> <ul> 。 这使HTML无效，并在不同的浏览器中产生不稳定的结果。 因此，您需要编辑模板以在特定的<li>呈现它，并在其中添加内容。