html - 输入字段的 Bootstrap Navbar 动画剪辑

Question

我有一个可折叠的引导导航栏。我在可折叠 <div> 中有两个元素,

<form class="form-inline>和 <select class="custom-select" id="menu">

(查看我的代码)

我的问题是，当我打开可折叠区域时，这两个元素被短暂地切断，然后在 NavBar-Brand 下快速对齐(您可以看到这种情况发生 here )。我不知道如何处理这个问题，因为我需要将这两个元素与导航栏中的品牌保持对齐，但我一直无法找到解决方案。任何建议表示赞赏。谢谢!

HTML:

<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">
                <div class="interior">
                    <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</a></option>
                                <option value='inductors'>Inductors</a></option>
                                <option value='resistors'>Resistors</a></option>
                                <option value='miscellaneous'>Miscellaneous</a></option>
                            </select>
                        </div>    
                    </ul>
                </div>
            </div>
        </div>     
    </nav>

Answer 1

.interior {margin-left: -12.5%;}

请删除此 CSS。它会解决你的问题。