如何在标签和单选按钮之间添加空格？引导程序 4答案

【问题标题】：How to add space between label and radio button? Bootstrap 4如何在标签和单选按钮之间添加空格？引导程序 4
【发布时间】：2020-02-12 22:30:41
【问题描述】：

我尝试了这个solution，但没有成功，有什么建议可以实现吗？

<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

【问题讨论】：

注意：<input> 标签没有结束标签。您的 HTML 无效。

标签： html css bootstrap-4 radio-button

【解决方案1】：

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>

【讨论】：

【解决方案2】：

编辑：您可以将输入和标签分开，并使用输入上的“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>

【讨论】：

注意：<input> 标签不使用也不需要结束斜线，并且在 HTML 中从来没有。

【解决方案3】：

安装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>

【讨论】：