Bootstrap - 减少文本框和标签等表单控件之间的间距

Question

我正在开发一个 .NET(C#) MVC Web 应用程序。 我有以下引导下拉菜单。

我正在努力实现以下两件事：

• 1) 我正在尝试减少标签与其各自文本框之间的间距。我尝试使用“col-xs-1 col-form-label”而不是“col-xs-2 col-form-label”，但随后文本框与标签重叠。

• 2) 我想降低文本框的高度。

我怎样才能实现这些？

这是我的 cshtml 代码：

<div class="container">
<div class="row">

    <div class="input-group" id="adv-search">
        <input type="text" class="form-control" placeholder="Search" id="searchBar" />

        <div class="input-group-btn">

            <div class="btn-group" role="group">

                <button type="button" class="btn btn-primary" onclick="ReloadData()"><span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span></button>

                <div class="dropdown dropdown-lg">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Click To Expand"></button>

                    <div class="dropdown-menu dropdown-menu-right" role="menu">
                        <form class="form-horizontal" role="form" style="font-family:Calibri;font:94% 'v', sans-sarif;background-color:#FAFAFA">
                            <br />

                            <div class="form-group row">
                                <label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
                                <div class="col-md-2">
                                    <input class="form-control" type="text" id="txtChopRequestNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
                                </div>

                                <label for="ReferenceNo" class="col-xs-2 col-form-label">Reference No.</label>
                                <div class="col-md-2">
                                    <input class="form-control" type="text" id="txtReferenceNo" onKeyDown="if (event.keyCode == 13) ReloadData()" />
                                </div>

                                <label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
                                <div class="col-md-2">
                                    <input class="form-control" type="text" id="txtCreatedBy" />
                                    @*@Html.TextBox("name",null, new { id = "txtCreatedBy", style = "width:156px;" })*@                             
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
                                <div class="col-md-2">
                                    <input class="form-control" type="text" id="txtChopper" onKeyDown="if (event.keyCode == 13) ReloadData()" />
                                </div>

                                <label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
                                <div class="col-md-2">
                                    <input class="form-control" type="text" id="txtManager" onKeyDown="if (event.keyCode == 13) ReloadData()" />
                                </div>

                                <label for="RequestNo" class="col-xs-2 col-form-label">Request No.</label>
                                <div class="col-md-2">
                                    <input class="form-control" type="text" id="txtLeagalApprover" onKeyDown="if (event.keyCode == 13) ReloadData()" />
                                </div>
                            </div>

                           //and so on

                        </form>
                    </div>
                </div>
                <button type="reset" class="btn btn-warning" id="clearAll" style="background-color:#cc0000" data-toggle="tooltip" title="Clear All Search Parameters">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
        </div>
    </div>
</div>

这是我的 CSS 代码：

.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}
.input-group-btn .btn-group {
    display: flex !important;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

@media screen and (min-width: 1000px) {
    #adv-search {
        width: 1110px;
        margin: 0 auto;
    }
    .dropdown.dropdown-lg {
        position: static !important;
    }
    .dropdown.dropdown-lg .dropdown-menu {
        min-width: 1110px;
    }
}

Answer 1

我正在尝试减少标签与其各自文本框之间的间距。

给你的 texboxes 一个 css 类（pull-left 或任何你想叫它的），然后使用 css 将文本框拉到左边。

.pull-left { 左边距：-20px； /* 尝试不同的值直到你满意 */ }

我想降低文本框的高度。

尝试使用padding 和line-height 并玩弄数字，直到您对高度满意为止：

input[type="text"]{ padding: 20px 10px; line-height: 28px; }

上面将应用上下 20px 和左右 10px。以下是其他一些方法：

padding: 20px 10px 20px 10px; /*top right bottom left*/ 

最后确保这些边距在您更改屏幕尺寸时发挥良好。如果它在大屏幕上看起来不错，在小屏幕上可能看起来不太好，所以选择在所有屏幕上看起来都不错的东西。