0

我使用 bootstrap 4 并在一个部分中使用此表单，我在将按钮居中并将其设置为两列的长度时遇到问题，以便它与输入框外边框相同。目前，如果我只有 100% 宽度的按钮，它看起来居中，但比输入框长，所以它看起来不正常。我的结构是否正确？我使用了那里的表格示例，但不确定这是否正确或是否有更好的方法。

这是我的代码笔： https ://codepen.io/robot_head/full/qKQwqe/

该部分的html：

<div class="container-fluid bg-3 text-center" id="contact">
    <h3>CONTACT US</h3><br>
    <div class="container">
<div class="col-sm-8 col-sm-push-2">

        <form role="form">
        <br style="clear:both">
<div class="col-sm-6">
                    <div class="form-group">
                        <input type="text" class="control" id="firstname" name="firstname" placeholder="First Name" required>
                    </div>
                    <div class="form-group">
                        <input type="text" class="control" id="email" name="email" placeholder="Email" required>
                    </div>
</div>
<div class="col-sm-6">

                    <div class="form-group">
                        <input type="text" class="control" id="lastName" name="lastName" placeholder="Last Name" required>
                    </div>
                    <div class="form-group">
                        <input type="text" class="control" id="phone" name="phone" placeholder="Phone" required>
                    </div>
</div>

    <button type="button" id="submit" name="submit" class="btn btn-primary pull-right">SEND</button>
        </form>

</div>
</div>
      </div>

CSS：

#contact{
  background-color: #febb2e;
  height: 500px;
  color: #000;
}
.form-area
{
    background-color: #FAFAFA;
    padding: 10px 40px 60px;
    margin: 10px 0px 60px;
    border: 1px solid GREY;
    }
.control{
  display: block;
    width: 100%;
    height: 50px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
}
button#submit {
    background-color: #8d1f2d;
    border-color: #8d1f2d;
    width: 100%;
    border-radius: 10px;
}
4

1 回答 1

1

您可以通过多种方式修复它们，问题的原因是 col-sm-6 类的两边都有 15px 的填充，而您的按钮没有任何填充。作为一个快速修复，您可以将您的按钮包装在具有类 col-sm-12 的 div 中，或者只需在按钮的左右添加 15px 的填充。

于 2018-06-28T20:32:39.860 回答