Флажок Bootstrap 3 - Добавить пробел между флажком и текстом

Question

Я пытаюсь добавить пробел между флажком и текстом флажка.Как я могу добавить желаемое пространство между этими элементами?Я добавил поле справа, но это не повлияло.

Вот мой HTML-код:

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>

Answer 1

Попробуйте переопределить стандартные стили начальной загрузки для флажка.

В приведенном ниже примере я добавил разницу отступов 10px от стиля по умолчанию, вы можете изменить их соответствующим образом, чтобы исправить свой дизайн.

.checkbox label, .radio label {
    padding-left: 30px !important;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] 
{
    margin-left: -30px !important;
}

Answer 2

попробуйте этот код:

CSS:

.check-space{
  margin-right: 15px;
}

html:

<div class="checkbox">
  <label><input type="checkbox" value="" class="check-space">Option 1</label>
</div>