Переместить форму поиска в центр - PullRequest
Новая
       7

Переместить форму поиска в центр

1 голос
/ 31 марта 2019

Я создаю страницу-страницу, похожую на bootstrap-4.Я начинающий.Я хотел бы переместить мою форму в панели навигации в центр.Как мне это сделать?Вот моя веб-страница: 


    <body>
            <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" navbar>
                    <a class="navbar-brand" href="#">Agora</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                        <a class="nav-link" href="#">Messages<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Settings
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Logout</a>
                        </div>
                        </li>
                    </ul>
                    <form class="form-inline my-2 my-xlg">
                        <input class="form-control mr-sm-5" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                    </form>
            </nav>
 </html>

Я удалил некоторую ненужную часть страницы.

Ответы [ 2 ]

1 голос
/ 31 марта 2019

Переместите его перед navbar-nav и используйте mx-auto ... 

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Agora</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline mx-auto my-2">
            <input class="form-control mr-sm-1" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Messages<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Settings
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Logout</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/go/XxoZUwh5C3

Похожие: Bootstrap NavBar с выровненными по левому, среднему или правому краю элементами

0 голосов
/ 31 марта 2019

Благодаря @zim я немного решил свою проблему. С решением, которое она дает мне, я переместил также «сообщения». Поэтому я немного обновил свой код: 

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" navbar>
                    <a class="navbar-brand" href="#">Agora</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                    <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                            <a class="nav-link" href="#">Messages<span class="sr-only">(current)</span></a>
                            </li>
                    </ul>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <form class="form-inline my-2 mx-auto">
                            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                    <ul class="navbar-nav mr-0">
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Settings
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Logout</a>
                        </div>
                        </li>
                    </ul>
                  
            </nav>

Однако ответ был действительно полезным! :)

...