我正在尝试在移动视图中使用全屏下拉菜单。这不是导航栏下拉列表,而是常规下拉列表。
JSFIDDLE:https://jsfiddle.net/rg695Lqs/
@media (max-width: 767px) {
.dropdown-menu {
right: 0;
width: 100%;
}
.dropdown {
position: static;
}
}
<div class="container">
<div class="row">
<div class="col-2"></div>
<div class="col-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-2"></div>
</div>
</div>
最佳答案
选项1的下拉列表包含在col-10
中。您可以改用col-md-10
,以便在移动设备上包含的col为全角? (没有其他CSS更改)
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10">
<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-2"></div>
</div>
</div>
https://jsfiddle.net/3jq0ozfs/
选项2是
position:static
容器(dropdown
和col-10
)。这将使col-2
和col-10
保持相同。 (没有其他CSS更改) <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>
https://jsfiddle.net/xsv1d6u5/1/