Question

我尝试了这个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

Answer 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>

Answer 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>

Answer 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>

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

3 个答案: