Bootstrap 4 выпадающий с полной шириной в мобильном

Question

Я пытаюсь получить раскрывающийся список с полным экраном в мобильном представлении.Это не выпадающий список, а обычный выпадающий список.

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>

Answer 1

Опция 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/

Answer 2

При полной ширине, если вы имели в виду 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>

Обратите внимание, что я только что изменил классы col-* на col-md-*. Это позволит убедиться, что столбцы имеют свой соответствующий размер до среднего размера (планшеты 768px и выше) и имеют полную ширину на устройствах ниже этого (col-12 по умолчанию).

Также в CSS будет работать следующий код:

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

Просто сделав .dropdown как relative, мы даем указание детям этого элемента оставаться внутри него. А добавление 100% ширины к button внутри .dropdown обеспечит ее 100% ширину.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Answer 3

Вы можете попробовать это ... Я только что изменил раскрывающееся меню, чтобы следовать фиксированной позиции, чтобы оно соответствовало полям экрана устройства, как родительское, и покрывало всю ширину экрана мобильного устройства.

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

https://jsfiddle.net/rg695Lqs/7/