Что вызывает дополнительные пробелы в выпадающем меню Bootstrap?

Question

Что вызывает у моего выпадающего меню лишние пробелы?(Извиняюсь за скриншот)

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <span class="caret">Snooze</span>
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item">1 Hour</li>
    </div>
</div>

Насколько я знаю, в моих файлах CSS нет ничего странного, что могло бы вызвать это.Я использую Bootstrap4.

Answer 1

Проверьте этот код.Я удалил <span class="caret"></span>, потому что это не допустимый класс в начальной загрузке.Я изменил btn-default на другую кнопку, в данном случае btn-primary.

Самая важная ошибка - посмотрите на dropdown-menu.Вы открываете тег button и закрываете li, поэтому я изменил его на div, и он работает хорошо.

Проверьте документацию Bootstrap для получения дополнительной информации здесь https://getbootstrap.com/docs/4.3/components/dropdowns/.

/*DEMO*/
body{padding:3rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Snooze</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">1 Hour</div>
    </div>
</div>

Answer 2

Ваша HTML структура неверна.Проверьте, что у вас внутри .dropdown-menu элемента.

Вместо <button class="dropdown-item">1 Hour</li> используйте <li class="dropdown-item">1 Hour</li>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Snooze
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li class="dropdown-item">1 Hour</li>
  </div>
</div>