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

Question

我正在开发 .NET(C#) MVC 网络应用程序。 我有以下 Bootstrap 下拉菜单。

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

• 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

I'm trying to reduce the spacing between a label and it's respective text-box.

为您的文本框提供一个 css 类(向左拉或任何您想要的名称)，然后使用 css 将文本框向左拉。

.向左拉{ 左边距:-20px；/* 尝试不同的值直到你满意为止 */

I want to reduce the height of the textbox.

尝试使用 padding 和 line-height 并调整数字直到您对高度满意为止:

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

上面的代码将在顶部和底部应用 20px，在左侧和右侧应用 10px。以下是一些其他方法:

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

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