Question

有人可以告诉我在下面的代码中需要实现什么来调整（降低）组件之间的高度？

我尝试了几种组合，包括在每个可能的组件中使用margin-bottom：5px但没有结果。

注意：我找到了这个解决方案（Bootstrap 2），但它对我的情况不起作用。 Reduce height between bootstrap form components

我在bootstrap.css上找到的最接近的想法（与上面的答案相关）是下面的一个，我立即设置为1px但没有改变

.form-group {
  margin-bottom: 1px; 
}

//这是示例代码：

@model Models.Customer

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <form role="form">

        <div class="form-group input-group-sm">
            @Html.LabelFor(model => model.Name, new { @class = "control-label input-sm" })
            @Html.TextBoxFor(model => model.Name, new { @class = "form-control input-sm" })
        </div>

        <div class="form-group input-group-sm">
            @Html.LabelFor(model => model.Address1, new { @class = "control-label input-sm" })
            @Html.TextBoxFor(model => model.Address1, new { @class = "form-control input-sm" })
        </div>

        <div class="form-inline input-group-sm" role="form">
            <div class="col-md-4">
                @Html.LabelFor(model => model.City, new { @class = "control-label input-sm" })
                @Html.TextBoxFor(model => model.City, new { @class = "form-control input-sm" })
            </div>

            <div class="col-md-4">
                @Html.LabelFor(model => model.State, new { @class = "control-label input-sm" })
                @Html.TextBoxFor(model => model.State, new { @class = "form-control input-sm" })
            </div>

            <div class="col-md-4">
                @Html.LabelFor(model => model.Zip, new { @class = "control-label input-sm" })
                @Html.TextBoxFor(model => model.Zip, new { @class = "form-control input-sm" })
            </div>
        </div>

        <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
    </form>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Answer 1

你应该发布解析后的html。

班级

input-group-sm

需要

input-group input-group-sm

请参阅http://getbootstrap.com/components/#input-groups

你也有一个div.form-inline，只需使用一行，然后使用你拥有的列。

所有影响核心bootstrap.css的CSS都必须遵循。因此，在编译bootstrap.less之后将其添加到LESS中的导入，或者如果使用CSS，则将其放在所有其他CSS之后。

对于.form-group之间的垂直高度，根据需要调整css（在表单上放置一个类以不影响所有表单）：

/*vertical height between form-groups*/
.my-form .form-group {
    margin-bottom: 4px
}
@media (min-width:768px) { 
    .my-form .row {
        margin-left: -1px;
        margin-right: -1px;
    }
    .my-form [class*="col-"] {
        padding: 0 2px
    }
}

以下是在表单中使用行并调整列和表单组之间的垂直和水平宽度的示例：

如何减少bootstrap 3 MVC 5上组件之间的高度

1 个答案:

http://jsbin.com/omEqUFi/1/edit **