Как добавить пробел между меткой и переключателем? Bootstrap 4 - PullRequest
Новая
       13

Как добавить пробел между меткой и переключателем? Bootstrap 4

0 голосов
/ 12 февраля 2020

Я пробовал это решение , но оно не сработало, какой-нибудь совет, как его можно достичь? 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-4">
    <p>Signing on behalf of</p>
    <label class="radio-inline" style="">
      <input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
      </label>
    <label class="radio-inline" style="padding-left:15px;">
      <input type="radio" name="optradio" style="padding-left:15px;">An Individual
      </label>
  </div>
</div>

JSfiddle

Ответы [ 3 ]

0 голосов
/ 12 февраля 2020

Insted padding-left использование margin-right. И не используйте закрывающий тег </input>, он автоматически закрывается как <input />

.radio-class {
  margin-right: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-4">
    <p>Signing on behalf of</p>
    <label class="radio-inline" style="">
      <input type="radio" name="optradio" checked="true" class="radio-class" />A Company
      </label>
    <label class="radio-inline" style="padding-left:15px;">
      <input type="radio" name="optradio" class="radio-class" />An Individual
      </label>
  </div>
</div>
0 голосов
/ 12 февраля 2020
У тега

input нет закрывающего тега, второй ярлык переноса внутри span и присвойте ему margin

label span{
  display:inline-block;
  margin-left: 10px;
}
<div class="form-row">
   <div class="col-4">
      <p>Signing on behalf of</p>
      <label class="radio-inline" style="">
      <input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
      </label>
      <label class="radio-inline" style="padding-left:15px;">
      <input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
      </label>
   </div>
</div>
0 голосов
/ 12 февраля 2020

Редактировать: Вы можете просто разделить вход и метку и связать их, используя «id» на входе и атрибут «for» на метке. Затем вы можете добавить метку, чтобы добавить интервал. 

<input id="company" type="radio" name="optradio" checked="true"  /><span ></span><label for="company" class="radio-inline" style="padding-left:15px;"> A Company
  </label>
...