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

Posted 2023-05-08

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

【英文标题】：How to fix margin between multiple radio when adding interactive elements between Bootstrap 3?

【发布时间】：2019-12-30 13:55:29

【问题描述】：

每当我尝试在表单上的收音机之间添加所谓的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;。我该如何解决这个“保证金问题”？

【参考方案1】：

自定义引导 CSS 类

.additional-options 
  display: none;

.additional-options + .radio
   margin-top:-5px;

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

【讨论】：

我会避免完全更改 Bootstrap CSS。更改 Bootstrap 会或可能影响多个其他页面，在此之上，将相关功能包装在元素中并覆盖 Bootstrap 而不是使用给定元素可能是一个更好的主意。我会尝试看看是否可以通过这种方式实施您的解决方案。

【参考方案2】：

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

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

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

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

【讨论】：

我已经知道 Bootstrap 导致了这个问题，如果我没有提到margin-top: -5px，我就不会提及。我正在寻找一种方法来处理/处理这种情况，而不是简单的覆盖。