Bootstrap 3形成并形成最后一行背景颜色 [英] Bootstrap 3 form and form last row background color

问题描述

在我们的表单中，我们尝试：

1. 为表单添加背景颜色，


2. 背景颜色到表单的最后一行，它通常包含我们的按钮。

问题是背景颜色最后一行没有正确对齐。你会看到最后一行的大小超出了表格的宽度。

请参阅：

http://jsfiddle.net/4ThKn/2/

当您注意到黑色背景颜色未正确对齐粉红色的形式。

以下是代码，与bootstrap网站中的示例相同：

 < div class =container> 
< div class =row> 
< div class =col-md-6> 
< form class =form-horizo​​ntalrole =formstyle =background-color：pink> 
< div class =form-group> 
< label for =inputEmail3class =col-sm-2 control-label>电子邮件< / label> 
< div class =col-sm-10> 
< input type =emailclass =form-controlid =inputEmail3placeholder =Email> 
< / div> 
< / div> 
< div class =form-group> 
< label for =inputPassword3class =col-sm-2 control-label>密码< / label> 
< div class =col-sm-10> 
< input type =passwordclass =form-controlid =inputPassword3placeholder =Password> 
< / div> 
< / div> 
< div class =form-group> 
< div class =col-sm-offset-2 col-sm-10> 
< div class =checkbox> 
< label> 
< input type =checkbox>记住我< / label> 
< / div> 
< / div> 
< / div> 
< div class =form-groupstyle =background-color：black> 
< div class =col-sm-offset-2 col-sm-10> 
< button type =submitclass =btn btn-default>登入< / button> 
< button type =submitclass =btn btn-default>忽略！< / button> 
< / div> 
< / div> 
< / form> 
< / div> 
< div class =col-md-6> 
我只是一个样本
< / div> 
< / div> 
< / div> 
  

解决方案

问题是每个form-group都有一个left右边距为-15px，因此预计黑色部分会比粉色部分宽30px。

为了解决这个问题，我做了如下的事情：

 < div style =background-color：black; margin-left：0px; margin-right：0px;类=形式的基团> 
  

参考： https://github.com/morteza/bootstrap-rtl/issues/20

In our forms, we try to:

1. Add a background color to the form and
2. background color to the the last row of the form, which usually contains our buttons.

The problem is that the background color of the last row, is not aligned correctly. You will see that the last row size is exceeded the form width.

Please see:

http://jsfiddle.net/4ThKn/2/

As you noted the black background color is not aligned correctly with the form pink color.

Here is the code, which is same as sample in bootstrap site:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-horizontal" role="form" style="background-color:pink">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox">Remember me</label>
                        </div>
                    </div>
                </div>
                <div class="form-group" style="background-color: black">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Sign in</button>
                        <button type="submit" class="btn btn-default">Ignore!</button>
                    </div>
                </div>
            </form>
        </div>
                    <div class="col-md-6">
                        I am just a sample 
                    </div>   
    </div>
</div>

解决方案

The problem was each form-group has a left and right margin of -15px, so it's expected that the black part to be 30px wider than the pink part.

To fix it I did as below:

<div style="background-color: black; margin-left: 0px; margin-right: 0px;" class="form-group">

Reference : https://github.com/morteza/bootstrap-rtl/issues/20

这篇关于Bootstrap 3形成并形成最后一行背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！