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="radio">下方的<div class="additional-options" ... >应该有一个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;
      }

在Bootstrap 3之间添加互动元素时，如何固定多个无线电之间的边距？

2 个答案: