引导导航栏折叠页边距

问题描述 投票:0回答:2

我正在寻找一种方式来调整我的导航栏崩溃中的元素边缘(以下附上图片)。我只是需要在搜索栏和选择框的左侧与Navbar的品牌排队。下面是导航栏,以及我的尝试性解决方案的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%;
}

图片:enter image description here

html css bootstrap-4
2个回答
0
投票

尽量选择降低:

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

0
投票

这是为我工作

.navbar-toggle {
    margin-right: -12.5%;!important;
}
© www.soinside.com 2019 - 2024. All rights reserved.