使用Bootstrap 4使下拉菜单使用100%宽度
可以通过以下步骤实现：
- 在HTML文件中引入Bootstrap 4的CSS和JavaScript文件。可以通过以下链接获取最新版本的Bootstrap文件：
- CSS文件：https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css
- JavaScript文件：https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js
- 在HTML文件中创建一个下拉菜单的父容器，例如一个
<div>元素，并为其添加dropdown类。同时，为了使下拉菜单使用100%宽度，还需添加w-100类。
<div class="dropdown w-100">
<!-- 下拉菜单内容 -->
</div>- 在父容器中添加一个触发下拉菜单的按钮，例如一个
<button>元素，并为其添加btn和dropdown-toggle类。同时，为了使按钮占据100%宽度，还需添加w-100类。
<div class="dropdown w-100">
<button class="btn dropdown-toggle w-100" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</button>
<!-- 下拉菜单内容 -->
</div>- 在父容器中添加一个下拉菜单的内容区域，例如一个
<div>元素，并为其添加dropdown-menu类。同时，为了使下拉菜单内容使用100%宽度，还需添加w-100类。
<div class="dropdown w-100">
<button class="btn dropdown-toggle w-100" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</button>
<div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
<!-- 下拉菜单内容 -->
</div>
</div>- 在下拉菜单内容区域中添加具体的菜单项，例如一些
<a>元素，并为其添加dropdown-item类。
<div class="dropdown w-100">
<button class="btn dropdown-toggle w-100" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉菜单
</button>
<div class="dropdown-menu w-100" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">菜单项1</a>
<a class="dropdown-item" href="#">菜单项2</a>
<a class="dropdown-item" href="#">菜单项3</a>
</div>
</div>通过以上步骤，就可以使用Bootstrap 4使下拉菜单使用100%宽度了。请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行调整。
相关·内容
我使用Boostrap 4创建了一个下拉菜单，但是当屏幕是移动大小时，我使用了媒体查询。我想让我的下拉菜单在移动时使用100%，我已经尝试将宽度100%放在一些div或位置固定，但这些都不起作用。.notification-container-list-body-item-noimage { }
} 我也在使用
浏览 40提问于2020-06-24得票数 0
回答已采纳
我使用bootstrap，我有一个要求，在那里用户要求布局100%的高度和宽度，应该覆盖页面上的所有空间。我尝试了bootstrap类.container-fluid，但它不起作用。
浏览 0提问于2015-09-29得票数 0
我使用的是bootstrap 4 beta版。
目前，这些都是左对齐，如下图所示。我认为使用块级按钮会在下拉菜单上给我想要的结果，但它们在全尺寸导航栏上不起作用。我的问题是，当切换汉堡菜单时，如何使第二张图
浏览 2提问于2017-10-11得票数 0
1回答
我现在使用的是Bootstrap 4的dropdown。如何更改下面的代码，使单击按钮后出现的下拉菜单与按钮本身的宽度相同？请注意，按钮的大小可以根据里面的文本而改变，我希望无论文本如何，下拉菜单看起来都是一样的。"true" aria-expanded="false"> </button>
<div class="drop
浏览 5提问于2018-01-31得票数 2
回答已采纳
我的问题是Card2和Card3没有100%的剩余宽度。如何使Bootstrap4卡片宽度100%伸展？Card1已经被拉伸了，但是Card2和Card3在flex列中，并且没有被拉伸。<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/
浏览 36提问于2020-12-26得票数 0
回答已采纳
5回答
看看这张图： <li><a href="#" id="">3</a></li>
<li><a href="#" id=
浏览 0提问于2013-09-04得票数 10
我在引导4中创建了一个下拉菜单。我将下拉按钮和下拉菜单放在一个带有class=“容器”的div元素中，我希望下拉切换和下拉菜单能够获得其父元素的全部宽度。我写了这段代码<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
浏览 0提问于2018-09-09得票数 5
回答已采纳
4回答
true"></span> </li> </div></form>
我的目标是使它们100%宽(在div内没有自由的黄色空间)。
浏览 5提问于2014-12-08得票数 1
8回答
增加引导下拉菜单宽度
、、、、
想知道是否有人对如何增加下拉宽度有任何建议？
我有一个行，其中包含两个列，带有一些javascript，在选择时可以上下滑动下拉列表。我遇到的问题是，当选择时，我似乎无法计算如何增加下拉宽度，理想情况下，下拉列表应该与列大小匹配。但是，正在发生的事情是，下拉宽度只是与下拉列表中的文本相同的大小，有人建议如何增加下拉宽度以匹配列大小吗？
浏览 0提问于2014-04-13得票数 50
回答已采纳
我正在做一个引导项目，第一个任务是使用引导导航栏在标题中构建导航。我想使用Bootstrap的折叠功能来创建下拉菜单div，当用户悬停或激活导航项时，它将是可见的。我想使这个下拉菜单div 100%的屏幕宽度。下面是示例代码： <li class="dropdown">
<a ...>ABOUT<
浏览 0提问于2017-04-19得票数 0
回答已采纳
然后点击顶部的'Accordian'，下拉菜单从哪里得到它的宽度？从检验员那里，我得到的只是一个计算值，我不知道它是从哪里来的。这个宽度是否来自JavaScript？它似乎不受儿童因素的控制。
浏览 6提问于2014-02-17得票数 2
回答已采纳
1回答
我知道如何更改bootstrap 4下拉菜单宽度： .dropdown-menu{ min-width: ??px;} 但是，如果我的导航栏上有多个下拉菜单，如何更改仅一个特定下拉菜单的宽度？px;} 将id添加到特定的下拉菜单中，但这不起作用。 如何解决？
浏览 20提问于2019-03-06得票数 0
回答已采纳
当下拉菜单的宽度发生变化时，我会尝试将下拉菜单的宽度动态设置为与整个下拉菜单完全相同的大小。如何获得下拉式本身的宽度？import {Col, Container, Dropdown, Row} from 'react-bootstrap';
class SelectComp<Dropdown.Item o
浏览 4提问于2022-07-05得票数 0
回答已采纳
1回答
我正在学习bootstrap，并尝试使用基于的HERE地图html, body {}
width:100%; margin:0 auto;现在我想用bootstrap创建两列，左边是行程，右边是地图视图<div class=&q
浏览 2提问于2016-05-30得票数 1
2回答
看，我正在尝试使下拉菜单的链接延伸到它们所嵌入的.menu类的宽度上。但是它不能工作，即使我把所有的东西都嵌入其中，比如宽度: 100%；
有人能告诉我如何使我的下拉菜单的链接延伸到它们嵌入的.menu类的宽度吗？
浏览 0提问于2011-08-15得票数 0
回答已采纳
我决定使用下拉菜单来允许自己选择格式。问题是，当我添加一个下拉列表时，它不是在按钮下面，而是在按钮容器的开头。
第一个按钮看起来是活动的，因为文本左对齐...对不起，我试图找到一个解决的方法，但下拉菜单是从最后一个按钮。我的问题是，有没有一种方法可以将Twitter Bootstrap下拉菜单与它应该打开的按钮对齐，或者至少使下拉菜单与按钮容器的宽度对齐。
浏览 6提问于2013-02-13得票数 0
1回答
如何在物料界面设置下拉菜单位置
、、、、
我正在构建一个Gatsby应用程序，我想一旦菜单图标被点击，我的菜单将下拉下拉的权利和宽度为100%。MenuItem>2</MenuItem></Link> <Link to="/4"><MenuItem>
浏览 19提问于2020-07-15得票数 1
1回答
我有一个使用引导程序构建的导航菜单。菜单中充满了按钮，一旦单击下拉菜单，这些按钮将引入下拉菜单。
如何更改以下代码以将下拉菜单对齐到所选按钮的绝对右侧(浮动右)。这是我的代码： <nav>top: 0; /* Note opposite value
浏览 0提问于2015-06-24得票数 1
回答已采纳
1回答
如果单击搜索栏(右上)，则会出现下拉菜单。当然，在真正的代码中，这将是搜索结果的菜单。问题是，我希望下拉框的宽度与搜索框的宽度相同。initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap<
浏览 3提问于2017-12-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
