Блог

Главная - Вопросы по программированию - как выровнять элементы формы с помощью bootstrap

как выровнять элементы формы с помощью bootstrap

#forms #input #bootstrap-4 #flexbox #alignment

#формы #ввод #начальная загрузка-4 #flexbox #выравнивание

Вопрос:

Пожалуйста, проверьте фрагмент в режиме полной страницы. Первая панель навигации в порядке. Я попытался уменьшить ширину ввода поиска, но когда я это делаю, я больше не могу заставить ссылки полностью перемещаться вправо, как в первом примере. Может кто-нибудь объяснить, что контролирует ширину формы и как мне настроить ее для достижения желаемого результата

 <!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

        <title>Bootstrap Sandbox</title>
    </head>

    <body>
    <nav class='navbar navbar-expand-md bg-primary navbar-light mb-3'>
            <div class='container'>
                <a class='navbar-brand' href="#">NavBar </a>
                <button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav2'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div id='navbarNav2' class='collapse navbar-collapse '>
                    <ul class='navbar-nav ml-auto'>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Home</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">About</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Services</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="form-inline justify-content-end ">
                        <input type="text" class="form-control " placeholder='Search'>
                        <button class="btn btn-outline-success">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        
         <nav class='navbar navbar-expand-md bg-primary navbar-light'>
            <div class='container'>
                <a class='navbar-brand' href="#">NavBar </a>
                <button class="navbar-toggler" data-toggle='collapse' data-target='#navbarNav3'>
                    <span class='navbar-toggler-icon'></span>
                </button>
                <div id='navbarNav3' class='collapse navbar-collapse '>
                    <ul class='navbar-nav ml-auto'>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Home</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">About</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Services</a>
                        </li>
                        <li class='nav-item'>
                            <a class='nav-link' href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="form-inline justify-content-end ">
                        <input type="text" class="form-control w-50" placeholder='Search'>
                        <button class="btn btn-outline-success">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV 2 9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck 5T" crossorigin="anonymous"></script>
    </body>

Ответ №1:

Я думаю, что ширина формы основана на объединенной ширине кнопки поиска и элемента ввода (с его шириной по умолчанию).

При использовании w-50 ширина ввода уменьшается до половины ширины формы, которая, в свою очередь, основана на ширине элемента ввода по умолчанию.

Итак, вместо настройки width:50% , если вы можете установить ширину на фиксированное значение, например width:8em , вы можете достичь ожидаемых результатов.

введите описание изображения здесь

Метки: