在 Bootstrap 3 之间添加交互元素时如何修复多个收音机之间的边距？

Question

每当我尝试在表单上的收音机之间添加所谓的additional-options 元素时，Bootstrap (BS3) 都会导致在收音机上设置不同的边距。这不是不需要的，除非在选择所需的单选选项之前隐藏这些附加选项（javascript 交互）：

$(document).ready(function() {
  $("#additional-options-1").css("display", "block");
  $("input[type=radio][name=optionsRadios]").change(function() {
    if (this.value == "option1") {
      $("#additional-options-1").css("display", "block");
    } else {
      $("#additional-options-1").css("display", "none");
    }
  });
});

.additional-options {
  display: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<p>
  Try changing the following option and take a look at the margins of the available radios. What would be the supposed way to handle the margins? <br /><br />The radio element after the checkboxes requires a 'margin-top: -5px' according to the '.checkbox+.checkbox,
  .radio+.radio' CSS rule (by Bootstrap 3) but does not seem to get it after the 'additional-options' element gets a 'display: none;' (by provided javascript).
</p>
<hr />
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Radio option one
  </label>
</div>
<div class="additional-options" id="additional-options-1">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Check option one
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Check option two
    </label>
  </div>
</div>
<!--When additional-options is hidden:-->
<!--<div class="radio" style="margin-top: -5px;">-->
<!--Otherwise (no margin-top):-->
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Radio option two
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
    Radio option three
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">
    Radio option four
  </label>
</div>
<div class="additional-options" id="additional-options-2">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Check option one
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Check option two
    </label>
  </div>
</div>
<!--When additional-options is hidden:-->
<!--<div class="radio" style="margin-top: -5px;">-->
<!--Otherwise (no margin-top):-->
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios5" value="option2">
    radio option five
  </label>
</div>

JSFiddle

如您在上面的示例中所见，如果用户选择了任何单选（但第一个除外），则单选之间的边距不正确。

我尝试设置内联margin-top: -5px，但在显示相关复选框时也应该再次删除它。当复选框被隐藏时，相关的<div class="additional-options" ... > 正下方的<div class="radio"> 应该有一个margin-top: -5px;。我该如何解决这个“保证金问题”？

Answer 1

自定义引导 CSS 类

.additional-options {
  display: none;
}
.additional-options + .radio{
   margin-top:-5px;
}

https://jsfiddle.net/lalji1051/h01wnqoz/2/

Answer 2

由于低于 Bootstrap 类导致不同的边距。

.checkbox+.checkbox, .radio+.radio {
        margin-top: -5px;
      }

在您的本地 CSS 文件中覆盖该类，如下所示，并删除内联样式“margin-top:-5px”。

.checkbox+.checkbox, .radio+.radio {
        margin-top: 10px;
      }