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

使用Bootstrap的预定义网格类来对齐标签和组通过将.form-horizontal添加到水平布局中来控制表单形式（不一定是）。这样做会改变 .form-groups表现为网格行，因此不需要.row。

如果您阅读了Bootstrap的文档。它清楚地提到，.form-group里面的.form-horizontal就像.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.

最好删除表单水平类或使用自定义css

覆盖它

工作Codepen示例：http://codepen.io/happy2deepak/pen/wKwYXJ?editors=100

Answer 2

在div.form-group的html删除容器中。如果删除容器div.row和div.col-md-4，您的输入将使用表单默认填充进行呈现。同时将类form-inline添加到表单标记并删除类form-horizontal。试试这个解决方案吧

<div class="container-fluid">
 <tabset tab-theme="orange" tab-position="top" style="border:none!important;">
 <tab heading="Person"> 
<form class="form-inline"> 
<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>
 <!-- Text input-->
 <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>
 <!-- Text input-->
<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> 
</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 -->

Answer 3

好吧，我无法找到原因和正确的解决方案，所以我只是强迫我的CSS填充：

.form-horizontal .form-group {
    padding: 10px !important;
}

发现了这个问题。这是＆＃34; form-group＆＃34;包装。我拿出来，现在填充显示正确。

Answer 4

您的父容器<form>的类别为.form-horizontal。 Bootstrap（默认情况下）为此设置了负边距。下面是导致输入框行为的样式表的片段。

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
}

你可以：

从表单元素中删除form-horizontal类。 OR;
将以下内容添加到自定义样式表中以覆盖默认声明，如下所示：

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

这是一个小提琴演示供您查看。 http://jsfiddle.net/yongchuc/Lt0o5mp0/

Bootstrap填充没有显示选项卡

4 个答案: