如何将表单项与引导程序对齐答案

【问题标题】：how to align form items with bootstrap如何将表单项与引导程序对齐
【发布时间】：2021-04-04 07:38:39
【问题描述】：

请以全页模式检查 sn-p。第一个导航栏很好。我试图减小搜索输入的宽度，但是当我这样做时，我无法再像第一个示例中那样让链接一直向右移动。有人可以解释是什么控制了表单的宽度以及如何调整它以达到预期的结果

<!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>

【问题讨论】：

标签： forms input bootstrap-4 flexbox alignment

【解决方案1】：

我认为表单的宽度是基于搜索按钮和输入元素的组合宽度（默认宽度）。

使用 w-50，输入的宽度减小到表单宽度的一半，而表单宽度又基于输入元素的默认宽度。

所以，不用设置width:50%，如果可以将宽度设置为width:8em这样的固定值，就可以达到预期的效果。

【讨论】：