Question

几个小时以来，我一直在试图找出代码的问题所在，看来我需要一些外部关注。

我试图在Bootstrap 4中得到一个复选框，然后是两个垂直对齐的单选按钮，它们位于一个模态中。我在同一个模态中有一组相似的按钮，我只需要复制设置。但这一次单选按钮在复选框上重叠了。

我已经检查了文档，并在此处检查了多个问题，无济于事。

这是我正在使用的代码：

            <div class="upToClass">
                  <div class="form-check">
                    <input" type="checkbox" class="form-check-input" id="checkUpToPage">
                    <label class="form-check-label" for="checkUpToPage">
                      Up to
                    </label>
                  </div>
                  <!-- radio buttons to choose the end page -->
                  <div id="upToPage-choice">
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="check-no-page-1" id="check-no-page" value="P_no" checked>
                      <label class="form-check-label" for="check-no-page" data-toggle="popover" data-trigger="hover" data-content="Insert the number of the last page where the repetition shall apply.">
                        Page number
                      </label>
                    </div>
                    <div class="form-check">
                      <input class="form-check-input" type="radio" name="check-choose-page-1" id="check-choose-page" value="man_P">
                      <label class="form-check-label" for="check-choose-page" data-toggle="popover" data-trigger="hover" data-content="Choose manually the last page where the repetition should apply.">
                        Choose manually
                      </label>
                    </div>
                  </div>
            </div>

虽然相同的代码在模式中可以正常工作，但仅向下重叠几行： System.Globalization.UnicodeCategory enum

Answer 1

Pfft。我花了几个小时试图找出问题所在，而造成混乱的原因是在第一个"标记前面加上了一个简单的input。感谢@DavidLiang要求我提供jsfiddle，最终导致我发现了错误。

（我明白了，因为小提琴对bug表现出不同的反应：将Atom中的代码粘贴到小提琴中，在大多数属性的末尾添加了空格。这增加了麻烦，但它帮助我找到了真正的麻烦。）

Bootstrap 4复选框以及无线电重叠（以模式显示）

1 个答案: