下拉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>呈現它，並在其中添加內容。