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

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容器(dropdowncol-10)。这将使col-2col-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/

09-25 16:48
查看更多