如何使下拉菜单的宽度等于引导4中父菜单的宽度
我正在引导4中创建一个下拉列表。我把下拉切换按钮和下拉菜单放在类="容器"的div元素中，我希望下拉切换和下拉菜单为其父元素的全宽度。我为此写了这个代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<body>
<div class="container">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>下拉切换按钮占据其父div的全部宽度。但是，当我单击下拉切换按钮时，我发现下拉菜单没有占据全部宽度。我想让下拉菜单的宽度等于它的父菜单宽度，我该怎么做？（我尝试使用width:inherit；property，但没有正常工作）
共有3个答案
只需添加以下cssclasss
.dropdown-menu-width {
width: 689px !important //your required width
}
和html代码片段如下
<div class="container">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu dropdown-menu-width">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
</div>
实时显示
希望它能解决你的问题！！
下拉菜单具有position:absolute属性。因此，增加宽度：100%将使下拉菜单获取页面的全宽，而不是容器的全宽。要使下拉菜单具有其父元素的宽度，请使父元素的位置相对。要解决此问题，请首先将class=“position relative”属性添加到下拉菜单的父元素中。现在将w-100添加到下拉菜单div的class属性中。
<div class="container position-relative">
<button class="dropdown-toggle btn-block" data-toggle="dropdown">
dropdown
</button>
<div class="dropdown-menu w-100">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
你不需要额外的CSS。只需使用display=“static”下拉选项，以及下拉列表中的w-100和position static类，使其占据父级宽度的100%。
<div class="container">
<button class="dropdown-toggle btn-block" data-toggle="dropdown" data-display="static">
dropdown
</button>
<div class="dropdown-menu position-static w-100">
<a href="" class="dropdown-item">one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
<a href="" class="dropdown-item">four</a>
</div>
</div>
https://www.codeply.com/go/5GjATutCBb
另请参见：如何在Navbar中创建Bootstrap 4全宽下拉列表？
-
问题内容： 我正在一个涉及使用PHP脚本自动填充选择框的网站上工作。除了问题是我用来填充文本框的标题非常长（它们是期刊文章和演示文稿标题）外，所有其他方法都工作正常。下拉框延伸到最长元素的宽度，该元素延伸超出屏幕边缘，因此使滚动条无法触及。我尝试了多种尝试使用CSS手动将下拉框设置为特定宽度的方法，但到目前为止都无济于事。我所能做到的最好的事情是将“选择”框设置为一定的宽度，但是下拉菜单本身要宽得
-
问题内容： 我正在一个涉及使用PHP脚本自动填充选择框的网站上工作。一切都很好，除了问题是我用来填充文本框的标题非常长（它们是期刊文章和演示文稿标题）。下拉框延伸到最长元素的宽度，该元素延伸超出屏幕边缘，因此使滚动条无法触及。我尝试了多种尝试使用CSS手动将下拉框设置为特定宽度的方法，但到目前为止都无济于事。我最好地完成了将“选择”框设置为特定宽度的操作，但是下拉菜单本身的宽度要大得多。 任何对此
-
我正在尝试制作一个看起来像折叠项的全宽下拉菜单——网站现在经常使用的全宽可折叠导航。但我不知道怎么做。 我尝试过添加Bootstrap的折叠插件，但没有成功。增加一个以上的项目是否被认为是安全的做法。导航栏折叠类到导航栏？ 或者我的方法应该只是编辑Bootstrap的下拉列表？如果是这样，我应该怎么做？ 这里有一张图片向你展示了我正在努力实现的目标： 这是我的代码大纲，请查看全宽剪裁：
-
我这里有一个基本的Bootstrap navbar 我想做的是： （Navbar） -----logo---------------------登录/注册----- （下拉菜单） ----子项----子项---------------------------------- 在悬停时，我想使下拉菜单显示全宽右下方的navbar。悬停事件不是我有问题的，我有问题定位它正确的100%宽度。 更新 我看到
-
关于我的上一个问题（bootstrap上的下拉菜单不起作用），我正在为li下拉菜单的子菜单构建一个子菜单。这意味着它是嵌套的。银行菜单下有交易下拉菜单，交易下拉菜单下有不同类型交易的菜单。顺便说一下，我已经成功地创建了它，但是在悬停期间，“事务”模块的子菜单出现在事务菜单的前面，阻止了作为事务的父菜单。在悬停期间，如何避免它并将其放置在事务菜单的右侧？不管怎样，我已经使用了“右下拉菜单”，但它不会
-
嗨，我正在尝试自动启动下拉菜单。默认情况下，它的可见性是隐藏的。将鼠标悬停在它上面时，它的可见性属性显示为可见。我可以单击下拉菜单，但是在单击下拉菜单后，我的selenium脚本不能从下拉菜单中选择值。 错误：线程"main"org.openqa.selenium.ElementNotVisibleException异常：无法单击元素 HTML代码段