我如何创建一个全宽度的下拉菜单使用引导5

2022-01-25 03:47:52 标签 htmlcss

我的HTML:

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" style="color: #fff;" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">CURTAINS </a>
          <ul class="dropdown-menu columns" aria-labelledby="navbarDropdownMenuLink">
               <p class="sub dropdown-item">Curtains</p>
            <li><a class="dropdown-item" href="#">Ready-Made Curtains</a></li>
            <li><a class="dropdown-item" href="#">Custom-Made Curtains</a></li>
            <li><a class="dropdown-item" href="#">Made To Measure Curtains</a></li>
            <li><a class="dropdown-item" href="#">Blockout curtains</a></li>
            <li><a class="dropdown-item" href="#">Thernal Curtains</a></li>
            <li><a class="dropdown-item" href="#">Wave Fold Curtains</a></li>
            <li><a class="dropdown-item" href="#">Sheer Curtains</a></li>
            <li><a class="dropdown-item" href="#">Eyelet Curtains</a></li>
            <li><a class="dropdown-item" href="#">Pinch Pleat Curtains</a></li>
            <li><a class="dropdown-item" href="#">Blockout Eyelet Curtains</a></li>
            <li><a class="dropdown-item" href="#">Pinch Pleat Blockout Curtains</a></li>
            <li><a class="dropdown-item" href="#">Pencil Pleat Curtains</a></li>
            <li><a class="dropdown-item" href="#">Home Theatre Curtains</a></li>
            <li><a class="dropdown-item" href="#">Decorator Curtains</a></li>
            <li><a class="dropdown-item" href="#">Kids Curtains</a></li>
            <li><a class="dropdown-item" href="#">Extra Long Curtains</a></li>
            <li><a class="dropdown-item" href="#">Bulk Buy Curtains</a></li>
            <li><a class="dropdown-item" href="#">Design Your Own Curtains</a></li>
            <li><a class="dropdown-item" href="#">Curtain Sale Curtains</a></li>
            <li><a class="dropdown-item" href="#">Velvet Curtains</a></li>
            <li><a href="#"><img class="dropdown-img" src="https://images.pexels.com/photos/969593/pexels-photo-969593.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></a></li>
            <li><a href="#"><img class="dropdown-img" src="https://images.pexels.com/photos/969593/pexels-photo-969593.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></a></li>
          </ul>

# # #使用w-100 (width:10(宽度:100%)dropdown-menu and make sure the pa确保家长.dropdown is position-static<是position-static to 以允许菜单展开为全宽。

可选的CSS最小宽度设置:

https://www。codeply。com/go/fClz4WpC8u/bootstrap-4-dropdown-width

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码