Bootstrap填充没有显示选项卡

Hello i am having a weird issue here i have a i have created e form inside it but the padding does not display.

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

This is my html:

这是我的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 -->

There is usually padding my default for each form input container. In this case there is not.

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

I do not know it it is an issue with my html or css, is there a specific way of doing this or do i have to force the padding from my CSS?

我不知道这是我的HTML或CSS的问题,是否有一个特定的方式这样做或我必须从我的CSS强制填充?

4 个解决方案

#1

Bootstrap Documentation for Form Horizontal

表单水平的Bootstrap文档

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-horizontal(不必是a)来在水平布局中对齐表单控件的标签和组。这样做会改变.form-groups以表现为网格行,因此不需要.row。

If you read Bootstrap's doc. its clearly mentioned that, .form-group inside .form-horizontal acts as .row, hence, you col-md-xx are not getting their padding. as per your code:

如果您阅读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.

Better remove form-horizontal class or overwrite it with your custom css

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

working Codepen example: http://codepen.io/happy2deepak/pen/wKwYXJ?editors=100

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

#2

In your html remove container of div.form-group .if you remove both containers div.row and div.col-md-4 your inputs will be rendered with form default padding. Also add class form-inline to form tag and remove class form-horizontal. Try this solution it will work

在你的html删除容器div.form-group。如果你删除容器div.row和div.col-md-4你的输入将使用表单默认填充。还要添加类form-inline以形成标记并删除class 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 -->

#3

Well i couldn't find the cause and the right solution so i just forced the padding in my CSS:

好吧,我找不到原因和正确的解决方案所以我只是强迫我的CSS填充:

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

Found the issue. it was with the "form-group" wrapper. I took it out, now the padding displays properly.

发现了这个问题。这是与“形式组”包装。我拿出来,现在填充显示正常。

#4

-1

It's your parent container <form> that has the class of .form-horizontal. Bootstrap (by default) has negative margins set for that. Below is a snippet of the style sheet that is causing the behavior of your input boxes.

它是您的父容器

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

You can either:

你可以:

Remove the form-horizontal class from the form element. OR;

从表单元素中删除表单水平类。要么;
Add the following to your custom style sheet to over write the default declaration, like this:

将以下内容添加到自定义样式表中以覆盖默认声明,如下所示:

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

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

Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/Lt0o5mp0/

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

#1