html - Bootstrap 填充不显示标签

Question

你好，我在这里遇到一个奇怪的问题，我已经在其中创建了电子表格，但填充不显示。

这是我的 html:

<div class="container-fluid">
    <tabset tab-theme="orange" tab-position="top" style="border:none!important;">
        <tab heading="Person">
            <form class="form-horizontal">

                    <div class="row">
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="first_name">First Name</label>
                                <input id="first_name" name="first_name" placeholder="Type here.." class="form-control" required="" type="text">
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="last_name">Last Name</label>
                                <input id="last_name" name="last_name" placeholder="Type here.." class="form-control" required="" type="text">
                            </div>
                        </div>
                        <!-- Text input-->
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="control-label" for="other_name">Other Name</label>
                                <input id="other_name" name="other_name" placeholder="Type here.." class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                </form>
        </tab>
        <tab heading="Company">
            <div class="col-xs-12">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores porro eveniet debitis quas sed harum nobis libero voluptatibus dolorum odio at veniam aut id corrupti hic esse quisquam fugiat. Asperiores in eveniet sapiente error fuga tenetur ex ea dignissimos voluptas ab molestiae eos totam quo dolorem maxime illo neque quia itaque.</p>
            </div>
        </tab>
    </tabset>
</div> <!-- container-fluid -->

通常每个表单输入容器都有我默认的填充。在这种情况下没有。

我不知道这是我的 html 或 css 的问题，是否有特定的方法可以做到这一点，或者我是否必须从我的 CSS 中强制填充？

Answer 1

Bootstrap Documentation for Form Horizontal

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a ). Doing so changes .form-groups to behave as grid rows, so no need for .row.

如果您阅读 Bootstrap 的文档。它清楚地提到，.form-horizo​​ntal 中的 .form-group 充当 .row，因此，您的 col-md-xx 没有得到它们的填充。 根据您的代码:

.row {margin-left:-15px;margin-right:-15px} // margin goes negative
.col-md-xx {padding-left:15px;padding-right:15px} // padding creates 30px gutter
.form-group {margin-left:-15px;margin-right:-15px} // again your margins go negative - hence no gutter.

最好删除 form-horizo​​ntal 类或用您的自定义 css 覆盖它

工作代码笔示例:http://codepen.io/happy2deepak/pen/wKwYXJ?editors=100