I am currently working on a .NET (C#) MVC web application and I have implemented a Bootstrap dropdown menu in my project.

My main objectives are as follows:

• 1) I aim to minimize the space between a label and its corresponding text-box. Initially, I attempted using "col-xs-1 col-form-label" instead of "col-xs-2 col-form-label", but this caused the textbox to overlap with the label.

• 2) I also want to decrease the height of the textbox.

How can I go about achieving these goals?

Below is an excerpt from my cshtml code :

<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>

Furthermore, here's a snippet from my CSS code :

.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;
    }
}