javascript - 在 Bootstrap 3 之间添加交互元素时如何修复多个 radio 之间的边距？

Question

每当我尝试添加一个所谓的additional-options Bootstrap (BS3) 导致在我的表单上的 radio 之间设置不同的边距。这不是不需要的，除非在选择所需的单选选项之前隐藏这些附加选项(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

如您在上面的示例中所见，如果用户选择任何 radio (但第一个)， radio 之间的边距显示不正确。

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

Answer 1

像自定义 bootstrap CSS

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

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