Html 如何使用引导自定义响应搜索栏

我正在处理过滤器栏，并希望创建如下栏：

请注意，有一个带有参数流派、系统、语言的过滤条。请看公司栏，因为有很多公司，有一个更改页面按钮

问题是，现在我使用的是bootstrap导航栏，如何定制这样的功能，或者它已经存在于bootstrap中了

这是我的代码，非常感谢你的帮助

    <div class="row admin-form">
        <div class="col-lg-12">
            <header class="navbar bg-dark" style="z-index:10;">
                <form class="navbar-form navbar-left navbar-search ml5" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search...">
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-left">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Teacher</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist w400 bg-white" role="menu">
                            <?php
                            foreach ($teacher_list as $teacher) {
                                ?>
                                <li class="of-h col-lg-6">
                                    <a href="#" class="fw600 p12">
                                        <?= $teacher['name']; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Style</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($style_list as $style) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $style['title']; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Level</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($this->level_list as $level) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $level; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Pose</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($pose_list as $pose) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $pose['title']; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle fw600 disabled" data-toggle="dropdown">
                            <span>Duration</span>
                            <span class="caret caret-tp hidden-xs"></span>
                        </a>
                        <ul class="dropdown-menu dropdown-persist pn w250 bg-white" role="menu">
                            <?php
                            foreach ($this->duration_list as $duration) {
                                ?>
                                <li class="of-h">
                                    <a href="#" class="fw600 p12">
                                        <?= $duration; ?>
                                    </a>
                                </li>
                                <?php
                            }
                            ?>
                        </ul>
                    </li>
                </ul>
            </header>
        </div>
    </div>

更改搜索类

<input type="text" class="form-control Search" placeholder="Search...">

将内联样式添加为

<style>
.Search{
border-radius:10px;
}
</style>

.搜索{
边界半径：10px；
}