Css 移动设备中具有全宽的Bootstrap 4下拉菜单

我正在尝试在移动视图中使用全屏下拉菜单。这不是导航栏下拉列表，而是常规下拉列表

JSFIDDLE:

@介质（最大宽度：767px）{
.下拉菜单{
右：0；
宽度：100%；
}
.下拉列表{
位置：静态；
}
}

下拉列表

你可以试试这个。。我刚刚更改了下拉菜单以跟随固定位置，这样它将跟随设备屏幕的边距，因为它是父屏幕，并且它将覆盖移动屏幕的整个宽度

.dropdown-menu {
right: 0 !important;
left:0 !important;
position:fixed !important;
transform:none !important; } 

---

选项1下拉列表包含在

列10

中。您可以改用

col-md-10

，以便包含的col在移动设备上是全宽的（无额外CSS更改）

---

对于全屏，如果您指的是100%的屏幕宽度，您还必须对

HTML

进行一些更改

 <div class="container">
  <div class="row">
   <div class="col-md-2"></div>
    <div class="col-md-8">
     <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
      <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Link 1</a>
       <a class="dropdown-item" href="#">Link 2</a>
       <a class="dropdown-item" href="#">Link 3</a>
      </div>
     </div>
    </div>
    <div class="col-md-2"></div>
  </div>
</div>

只需将

.dropdown

设置为

relative

，我们就可以指示此元素的子元素留在其中。在

内部的
按钮中添加100%的宽度。下拉列表将确保其宽度为100%


@介质（最大宽度：767px）{
.下拉菜单{
右：0；
宽度：100%；
} 
.下拉列表{
位置：相对位置；
}
.下拉按钮{
宽度：100%；
}
}

下拉列表
最后使用了
位置：static
，效果很好。谢谢。这并不能解决问题，因为我需要列的格式是“col-x”。
  <div class="row">
    <div class="col-2"></div>
    <div class="col-10 position-static">
      <div class="dropdown position-static">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
        <div class="dropdown-menu ml-1">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
        </div>
      </div>
    </div>
    <div class="col-2"></div>
  </div>

 <div class="container">
  <div class="row">
   <div class="col-md-2"></div>
    <div class="col-md-8">
     <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown</button>
      <div class="dropdown-menu">
       <a class="dropdown-item" href="#">Link 1</a>
       <a class="dropdown-item" href="#">Link 2</a>
       <a class="dropdown-item" href="#">Link 3</a>
      </div>
     </div>
    </div>
    <div class="col-md-2"></div>
  </div>
</div>

@media (max-width: 767px) {
  .dropdown-menu {
    right: 0;
    width: 100%;
  } 
  .dropdown{
    position: relative;
  }
  .dropdown button {
    width: 100%;
  }
}