Question

https://jsfiddle.net/w0bekp8q/

<form class="form" role="form" method="post" action="">
                <div class="form-group">
                    <div class="col-md-4">
                        <label for="reportee_first_name" class="control-label">First Name</label>
                        <input type="text" class="form-control" id="reportee_first_name" name="reportee_first_name" placeholder="First Name" value="">
                    </div>
                    <div class="col-md-4">
                        <label for="reportee_middle_name" class="control-label">Middle Name</label>
                        <input type="text" class="form-control" id="reportee_middle_name" name="reportee_middle_name" placeholder="Middle Name" value="">
                    </div>
                    <div class="col-md-4">
                        <label for="reportee_last_name" class="control-label">Last Name</label>
                        <input type="text" class="form-control" id="reportee_last_name" name="reportee_last_name" placeholder="Last Name" value="">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-6">
                        <label for="reportee_address_1" class="control-label">Address</label>
                        <input type="text" class="form-control" id="reportee_address_1" name="reportee_address_1" placeholder="Address" value="">
                    </div>
                    <div class="col-md-6">
                        <label for="reportee_address_2" class="control-label">Address 2</label>
                        <input type="text" class="form-control" id="reportee_address_2" name="reportee_address_2" placeholder="Address 2" value="">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-6">
                        <label for="reportee_city" class="control-label">City</label>
                        <input type="text" class="form-control" id="reportee_city" name="reportee_city" placeholder="City" value="">
                    </div>
                    <div class="col-md-6">
                        <label for="reportee_zip" class="control-label">Zip</label>
                        <input type="text" class="form-control" id="reportee_zip" name="reportee_zip" placeholder="Zip" value="">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="reportee_phone" class="control-label">Phone</label>
                        <input type="text" class="form-control" id="reportee_phone" name="reportee_phone" placeholder="Phone" value="">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="reportee_email" class="control-label">Email Address</label>
                        <input type="email" class="form-control" id="reportee_email" name="reportee_email" placeholder="Email Address" value="">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <button id="submit" name="submit" type="submit" class="btn btn-primary btn-sm">Send</button>
                    </div>
                </div>
</form>

在上面的JSFIDDLE中，如果你把它拖出来，你可以看到我的提交按钮与电子邮件地址输入框对接。

这就是它在我的开发网站上的样子 -

我在这里缺少什么导致我的提交按钮与输入之间没有空格？

Answer 1

只需将表单类更改为form-horizontal：

<form class="form" role="form" method="post" action="">

到

<form class="form-horizontal" role="form" method="post" action="">

修改当你使用表单类时，你在form-group中使用的所有col-md- *类都会得到一个浮点数：left;在大屏幕中，导致形式组不会采取它的儿童身高。所以它会转到根元素的顶部，因此表单组的margin-bottom不会完全应用于按钮的上方，而是应用于根元素的顶部。使用form-horizontal可以防止这种行为。

Answer 2

我不知道为什么但你的.form-group正在从bootstraps md视图端口宽度大而失去它的高度。你可以做一些事情。您可以使用col-md-12而不是.form-group将margin-bottom应用于内部div。

.col-md-12 {
  margin-bottom: 15px;
}

您也可以尝试使用col-xs-12而不是md。然后你就有了一致的样式，并且可以在没有任何@media的情况下添加所需的边距。

<div class="form-group">
  <div class="col-xs-12">
    .....
  </div>
</div>

编辑：Adam指出了冗余的bootstrap类。

Bootstrap Form - 为什么我的提交按钮挤满了我的输入？

2 个答案: