Bootstrap: предотвращение свертывания панели при нажатии флажка - PullRequest
Новая
       21

Bootstrap: предотвращение свертывания панели при нажатии флажка

0 голосов
/ 21 марта 2020

Итак, у меня есть заголовок панели, который содержит текст и флажок. Как предотвратить разрушение панели при переключении флажка? 

<div class="panel-heading panel-heading-fail">
    <div class="panel-title" data-target="#panel_body"
                             data-toggle="collapse" data-parent="#panel_meta"
                             aria-expanded="true">
        <span class="pull-left">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
        </span>
        Some Text
    </div>
</div>

Каждый раз, когда я переключаю флажок, она открывает / закрывает панель. Как я могу предотвратить это?

Спасибо.

1 Ответ

0 голосов
/ 21 марта 2020

pull-left был заменен в Bootstrap 4 на float-left, а при использовании float-left используйте элемент-обертку с class = "form-check", чтобы обеспечить правильные поля для меток и флажков. Вы можете видеть, что я добавил класс "проверка формы" в div, окружающий ваш <span>. 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="panel-heading panel-heading-fail">
    <div class="panel-title form-check" data-target="#panel_body" data-toggle="collapse" data-parent="#panel_meta" aria-expanded="true">
      <span class="float-left">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
      </span>
      Some Text
    </div>
  </div>

</body>

</html>

Просто добавьте data-toggle = "collapse" и цель данных к элементу, чтобы автоматически назначить управление одним или несколькими свертываемыми элементами. Атрибут data-target принимает селектор CSS для применения свертывания. Обязательно добавьте свернутый класс в складной элемент. Если вы хотите открыть его по умолчанию, добавьте дополнительный класс show.

Это из документации . Проверьте это.

...