如何使用 bootstrap 自定义响应式搜索栏

Question

我正在处理过滤栏，我想创建这样的栏：

http://www.gog.com/games##sort=bestselling&page=1

请注意，有一个带有参数流派、系统、语言的过滤栏。请看一下公司栏目，公司很多，有换页按钮。

问题是，现在我正在使用 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>

Answer 1

更改搜索 class

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

添加内联样式为

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