Менубар не согласован с использованием Bootstrap 4

Question

Я создаю меню, используя Bootstrap 4 .Это мой текущий код:

<div class="row mx-2">
    <div class="dropdown">
        <div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
            Option 1
        </div>
        <div class='dropdown-menu'>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
                DDO11
            </div>
            <a href="abc.php" class='dropdown-item'>DDO12</a>
            </form>
        </div>
    </div>
    <div class="dropdown">
        <div class="btn btn-info dropdown-toggle mx-3" data-toggle='dropdown'>
            Option 2
        </div>
        <div class='dropdown-menu'>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO21</div>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO22</div>
        </div>
    </div>
    <div class="btn btn-dark col mx-2" onclick="dosomething()">Option3</div>
    <div class="dropdown">
        <div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
            Option 4
        </div>
        <div class='dropdown-menu'>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDOP41</div>
        </div>
    </div>
    <div class="btn btn-dark col mx-2"><a href='ABC.php' style="text-decoration:none;color:#fff;">Option 5</a></div>
</div>

Проблема в том, что раскрывающиеся кнопки имеют ширину, равную тексту, а невыпадающие кнопки слишком широкие и занимают все оставшееся пространство.Мне нужно, чтобы все кнопки выбора были одинаковой ширины.

Я пытался назначить width: 20% , а также пробовал col - * - * на всех родительских кнопках выбора, но ничего не получалось.

Что еще можно сделать, чтобы добиться одинаковой ширины для всех кнопок выбора?

Answer 1

Используя подход Bootstrap, я предлагаю вам создать сетку (сетка имеет 12 столбцов) с одной строкой и пятью столбцами с классом col-sm-2 (на экранах XS расположение должно отличаться из-замаленькая общая ширина у вас есть).Чтобы сделать это по центру, просто добавьте класс offset-sm-1 к первому элементу col-sm-2.И чтобы кнопки имели полную ширину столбца, который их оборачивает, просто используйте класс btn-block .Я внес изменения в ваш пример, чтобы сделать эту работу:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid">

<div class="row">

  <div class="offset-sm-1 col-sm-2 mb-1">
    <div class="dropdown">
      <div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
        Option 1
      </div>
      <div class='dropdown-menu'>
        <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
          DDO11
        </div>
        <a href="abc.php" class='dropdown-item'>DDO12</a>
      </div>
    </div>
  </div>

  <div class="col-sm-2 mb-1">
    <div class="dropdown">
      <div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
        Option 2
      </div>
      <div class='dropdown-menu'>
        <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
          DDO21
        </div>
        <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
          DDO22
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-2 mb-1">
    <div class="btn btn-dark btn-block" onclick="dosomething()">Option3</div>
  </div>

  <div class="col-sm-2 mb-1">
    <div class="dropdown">
      <div class="btn btn-info btn-block dropdown-toggle" data-toggle='dropdown'>
        Option 4
      </div>
      <div class='dropdown-menu'>
        <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
          DDOP41
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-2 mb-1">
    <div class="btn btn-dark btn-block">
      <a href='ABC.php' style="text-decoration:none;color:#fff;">Option 5</a>
    </div>
  </div>

</div>

</div>

Answer 2

В Bootstrap 4 класс row должен only использоваться, чтобы содержать col*, а не другие элементы, такие как btn и dropdown.Другие элементы размещены внутри столбцов.From Bootstrap docs ...

"Строки являются обертками для столбцов. Каждый столбец имеет горизонтальный отступ (называемый желобом) для управления пространством между ними ... В макете сетки содержимое должно бытьпомещены в столбцы, и только столбцы могут быть непосредственными потомками строк. "

Поместите раскрывающийся список и btn в столбцы.Используйте сетку автоматического макета (col или col-auto) для управления равной шириной.Для кнопок, которые заполняют ширину родительского элемента, используйте btn-block.

Для полной равной ширины используйте col ...

<div class="row mx-2">
        <div class="col">
            <div class="dropdown">
                <div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
                    Option 1
                </div>
                <div class="dropdown-menu">
                    ...
                </div>
            </div>
        </div>
        <div class="col">
            <div class="btn btn-dark btn-block mx-2">Option3</div>
        </div>
        ...
    </div>
</div>

Для "сжатия по размеру" используйте ширину содержимого col-auto ...

<div class="row mx-2">
        <div class="col-auto">
            <div class="dropdown">
                <div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
                    Option 1
                </div>
                <div class="dropdown-menu">
                    ...
                </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="btn btn-dark btn-block mx-2">Option3</div>
        </div>
        ...
    </div>
</div>

Демонстрация обоих вариантов

Answer 3

Вам нужно добавить CSS, как показано ниже в вашем CSS-файле

.dropdown-menu {
  min-width: unset !important; // add width as per your need
}

Live Demo

Надеюсь, это решит вашу проблему