Bootstrap проверка формы ставит флажок на текст - PullRequest
Новая
       5

Bootstrap проверка формы ставит флажок на текст

0 голосов
/ 28 апреля 2020

Я пытаюсь использовать bootstrap form-check класс для создания флажка. Это часть моего кода: 

<form>
  <div class="form-section">
    <div>Title</div>
    <div class="form-check">
      <input id="checkbox1" class="form-check-input" type="checkbox">
      <label class="form-check-label" for="checkbox1">
        VS-57KM-Z9M1-WC6B-SRXL
      </label>
    </div>
  </div>
  <button class="btn btn-success w-100" type="submit">Confirm</button>
</form>

, где .form-section класс: 

.form-section {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 120px;
  margin: 10px;
  text-align: left;
}

Но, к сожалению, это то, что происходит, когда я захожу на страницу ...

checkbox

Что более интересно, это происходит только на Windows, на Ма c все работает правильно. В обеих системах я использую Google Chrome. Заранее благодарю за любую помощь!

1 Ответ

0 голосов
/ 28 апреля 2020

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

  .form-section {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 120px;
  margin: 10px;
  text-align: left;
}
<head>
  <title>Bootstrap 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/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> 
</head>
<body>

 <form>
  <div class="form-section">
    <div>Title</div>
    <div class="form-check">
      <input id="checkbox1" class="form-check-input" type="checkbox">
      <label class="form-check-label" for="checkbox1">
        VS-57KM-Z9M1-WC6B-SRXL
      </label>
    </div>
  </div>
  <button class="btn btn-success w-100" type="submit">Confirm</button>
</form>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...