html - Bootstrap Navbar 折叠边距

Question

我正在寻找一种方法来调整 Navbar-Collapse 中元素的边距(我在下面提供了一张图片)。我只需要搜索字段的左侧和选择框与 Navbar-Brand 对齐。下面是导航栏的 HTML 以及我尝试的解决方案。在此先感谢您的任何建议!-J

<nav class="navbar fixed-top navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Airforce Inventory Information Database</a>
        <!--<button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#navbar9">-->
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar9" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button>

        <!--<div class="navbar-collapse collapse" id="navbar9">-->
        <div class="collapse navbar-collapse" id="navbar9">
            <ul class="navbar-nav ml-auto">
                <form class="form-inline" data-toggle="#octopart" action="http://octopart.com/search" style="padding-top: 10px;">
                    <input class="form-control mr-sm-2" type="search" name="q" placeholder="Search Octopart ..." name="search" style="width: 45%;"> 
                    <button class="btn btn-outline-success my-2 my-sm-0" data_target="#octopart" type="submit"><i class="fa fa-search"></i></button>
                </form>
                <div class="input-group mb-3"  data-toggle="#parts" style="width: 35%; padding-top: 5px; padding-bottom: 10px;">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="inputGroupSelect01">Devices</label>
                    </div>
                    <select class="custom-select" id="menu">
                        <option value='capacitors'>Capacitors</option>
                        <option value='inductors'>Inductors</option>
                        <option value='resistors'>Resistors</option>
                        <option value='miscellaneous'>Miscellaneous</option>
                    </select>
                </div>    
            </ul>
        </div>
    </div>     
</nav> 

尝试:

.navbar > .collapse > .form-inline, .input-group {
    margin-right: -12.5%;
}

图片:

Answer 1

尝试将选择器缩减为:

.navbar > .collapse {
  margin-right: -12.5%;
}