html - 复选框出现在 Bootstrap 面板之外

Question

我有一个引导面板，里面有一个表单。

在 form 中，我有一些表单元素，例如 checkbox。请参见下面的示例。

<div class="container">
    <h2>Basic Panel</h2>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="checkbox">
                <input type="checkbox" id="1234" name="fieldname" value="1234">
                <label for="1234">Text</label>
            </div>
        </div>
    </div>
</div>

我遇到的问题是复选框出现在面板左边框上或稍前。我可以看到复选框的 CSS 告诉它 position: absolute 和 margin-left: -20px。

参见 fiddle :http://jsfiddle.net/zs9kw0ec/2/

有没有办法解决这个问题而不是乱加边距？

Answer 1

我用过，效果很好:

Here's the link to docs https://getbootstrap.com/docs/4.0/components/forms/

 <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>

这是 fiddle 的链接: http://jsfiddle.net/zs9kw0ec/4/