踩坑bootstrap：注意下拉列表中<br>存放的位置

最新推荐文章于 2023-10-12 15:58:24 发布

原创最新推荐文章于 2023-10-12 15:58:24 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

Bootstrap

0 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS实现一个简单的下拉菜单功能，包括按钮的设置、下拉菜单项的布局以及响应式的交互效果，是前端开发者入门级教程。

<div class="dropdown"><!--div的class决定了下拉菜单式dropup还是dropdown-->

    <button id="btn2" class="btn btn-default dropdown-toggle" id="dropdownMenu2"
            type="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
          此处是下拉菜单栏
    </button>
    <label>下拉菜单</label><br><!--此处加了换行会导致下拉的菜单和按钮之间产生空隙-->
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <li><a href="#">bbb</a></li>
        <li><a href="#">aaa</a></li>
        <li><a href="#">ccc</a></li>
        <li><a href="#">ddd</a></li>

在这里插入图片描述