Пользовательский флажок Bootstrap 4 не отображается

я хочу использовать пользовательский элемент управления bootstrap 4 для флажка, после прочтения документации я написал это, но флажок не отображается, что я делаю неправильно?

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "card-body"><label>Add Productc Varian for </label>
  <div class = "form-group"><label for = "formGroupExampleInput">Code</label><input type = "text" class = "form-control" placeholder = "Enter Name"></div>
  <div class = "form-group"><label for = "formGroupExampleInput">Name</label><input type = "text" class = "form-control" placeholder = "Enter Name"></div>
  <div class = "form-group"><label for = "formGroupExampleInput2">Description</label><textarea class = "form-control" placeholder = "Description"></textarea></div>
  <div class = "form-group">
    <div class = "custom-control custom-checkbox"><label for = "formGroupExampleInput2">Default</label><input type = "checkbox" class = "custom-control-input" id = "customControlValidation1"></div>
  </div>
  
<hr>
<div class = "form-group">
  <div class = "col-12"><button type = "button" class = "btn btn-default float-right">Add</button><button type = "button" class = "btn btn-danger float-right">Cancel</button></div>
</div>
</div>

css bootstrap-4

22.04.2019 06:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

9 472

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

<!-- begin snippet: js hide: false console: true babel: false -->

 <link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
    <div class = "card-body"><label>Add Productc Varian for </label>
      <div class = "form-group"><label for = "formGroupExampleInput">Code</label><input type = "text" class = "form-control" placeholder = "Enter Name"></div>
      <div class = "form-group"><label for = "formGroupExampleInput">Name</label><input type = "text" class = "form-control" placeholder = "Enter Name"></div>
      <div class = "form-group"><label for = "formGroupExampleInput2">Description</label><textarea class = "form-control" placeholder = "Description"></textarea></div>
      <div class = "form-group">
         <div class = "custom-control custom-checkbox">
        <input type = "checkbox" class = "custom-control-input" id = "customCheck" name = "example1">
        <label class = "custom-control-label" for = "customCheck">Check this custom checkbox</label>
      </div>
      </div>
    <hr>
    <div class = "form-group">
      <div class = "col-12"><button type = "button" class = "btn btn-default float-right">Add</button><button type = "button" class = "btn btn-danger float-right">Cancel</button></div>
    </div>
    </div>

22.04.2019 06:32

Это решит проблему для вас. Просто следуйте правильному синтаксису для пользовательских флажков.

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "card-body"><label>Add Productc Varian for </label>
  <div class = "form-group"><label for = "formGroupExampleInput">Code</label><input type = "text" class = "form-control" placeholder = "Enter Name"></div>
  <div class = "form-group"><label for = "formGroupExampleInput">Name</label><input type = "text" class = "form-control" placeholder = "Enter Name"></div>
  <div class = "form-group"><label for = "formGroupExampleInput2">Description</label><textarea class = "form-control" placeholder = "Description"></textarea></div>
  <div class = "form-group">
  <div class = "custom-control custom-checkbox">
    <input type = "checkbox" class = "custom-control-input" id = "customControlValidation1">
    <label class = "custom-control-label" for = "customControlValidation1">Default</label>
  </div>
<hr>
<div class = "form-group">
  <div class = "col-12"><button type = "button" class = "btn btn-default float-right">Add</button><button type = "button" class = "btn btn-danger float-right">Cancel</button></div>
</div>
</div>

Источник: JS-бин

22.04.2019 06:37

Ответ принят как подходящий

Просто добавьте пропущенный класс custom-control-label для метки. Вы просто хотите следовать пользовательским формам Форма Bootstrap-v4 для справки.

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "card-body">
    <label>Add Productc Varian for </label>
    <div class = "form-group">
        <label for = "formGroupExampleInput">Code</label>
        <input type = "text" class = "form-control" placeholder = "Enter Name">
    </div>
    <div class = "form-group">
        <label for = "formGroupExampleInput">Name</label>
        <input type = "text" class = "form-control" placeholder = "Enter Name">
    </div>
    <div class = "form-group">
        <label for = "formGroupExampleInput2">Description</label>
        <textarea class = "form-control" placeholder = "Description"></textarea>
    </div>  
    <div class = "form-group">
      <div class = "custom-control custom-checkbox">
          <input type = "checkbox" class = "custom-control-input" id = "customCheck1">
          <label class = "custom-control-label" for = "customCheck1">Default</label>
      </div>
    </div>
    <hr>
    <div class = "form-group">
        <div class = "col-12">
            <button type = "button" class = "btn btn-default float-right">Add</button>
            <button type = "button" class = "btn btn-danger float-right">Cancel</button>
        </div>
    </div>
</div>

22.04.2019 06:44

У меня была такая же проблема, проблема заключалась в том, что мои файлы Bootstrap 4 не обновлялись. Просто загрузите последнюю версию, и все должно быть в порядке.

20.11.2020 11:49

Другие вопросы по теме

Можно ли иметь более одного селектора «: root»?

Как проверить правильность ввода пользователя?

Можно ли вкладывать две строки в один контейнер?

Некоторые функции начальной загрузки не работают в Angular, но работают в обычном HTML-файле

Как использовать javascript для проверки, выбран ли 1 переключатель

Перенаправление на ссылку без всплывающего меню в браузере

Как выбрать элемент, используя (это) внутри оператора IF

Проблема с шириной столбца данных после «обновления» данных строки

Размер ввода меньше, чем «form-control-sm» в начальной загрузке 4, например. хз?

Почему не отображается стиль всплывающей подсказки начальной загрузки?

Пользовательский флажок Bootstrap 4 не отображается

Ответы 4

Другие вопросы по теме

Похожие вопросы