form > .panel > .panel-body > form-group 内容不在 .panel-body 内

Question

这是我的用例：我想在表单内创建面板以区分不同的标准。

我的问题是，当我在我的 <div class="panel-body"> 中创建一个 <div class="form-group"> 时，form-group 的内容超出了它的边界：在屏幕截图中，我的复选框超出了边界panel-body 边界。

这是我的 DOM 树：

<form class="form-horizontal">
    <div class="col-md-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="form-group">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"

有人可以告诉我如何以好的方式做到这一点吗？

Answer 1

我找到的解决方案是将此添加到我的 CSS:

.form-horizontal .panel-body .form-group {
    margin-right: 0;
    margin-left: 0;
}

form > .panel > .panel-body > form-group 内容不在 .panel-body 内

form > .panel > .panel-body > form-group content is not inside the .panel-body

forms

panel

twitter-bootstrap