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。

查看小提琴：http://jsfiddle.net/zs9kw0ec/2/

有没有一种方法可以解决此问题，而不是搞乱添加边距？

Answer 1

我已经使用过，并且可以正常工作：

这是文档的链接 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>

以下是小提琴的链接： http://jsfiddle.net/zs9kw0ec/4/

Answer 2

int包含直接应用于复选框的CSS样式。

您需要在CSS文件中覆盖此规则。

row

Answer 3

form.less CSS包含在row 237中：

 .radio input[type="radio"],
 .radio-inline input[type="radio"],
 .checkbox input[type="checkbox"],
 .checkbox-inline input[type="checkbox"] {
     position: absolute;
     margin-left: -20px;
     margin-top: 4px \9;
 }

将margin-left: -20px;更改为margin-left: 0px

复选框出现在引导面板的外面

3 个答案: