Html 引导4列对齐问题

我正在制作一个网站，目前正在处理BS4.1.3 我对这个世界还是新手，所以我现在有一个问题：

        <div class="container">
        <nav class="navbar sticky-top">
            <div class="grid">
                <div class="row">
                    <div class="col-md-4">
                        <a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
                            <img src="img/baseline-menu-24px.svg">
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a class="navbar-brand" href="#">
                            <img src="img/bootstrap-solid.svg" width="40" height="40">
                        </a>
                    </div>
                    <div class="col-md-4">
                        Test
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="collapse" id="collapse-top-menu">
                            <input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>

试验

但最终结果是这样的

虽然我希望第一个蓝色按钮和“logo”（B）对齐，但在导航栏的右侧“test”更多

---

此外，底部搜索栏的宽度应与容器的宽度相同，因此完整长度

我使用的是移动堆栈溢出应用程序，因此无法对其进行测试。 在bootstap4中，要将测试放在导航栏的右侧，您可以尝试

<ul class="navbar-nav ml-auto">The content which goes to right comes here as a li</ul>

右边的内容以li的形式出现在这里

此外，蓝色按钮（此处使用的按钮称为“汉堡”，请记住）也可以通过使用一些页边空白顶部对齐

只需使用CSS选择器选择汉堡，并为其提供一些margin top属性

请考虑添加一个CODEPDEN，这样我们的移动用户就可以玩你的代码了。

<代码>

  <div class="container">
        <nav class="navbar sticky-top">
            <div class="grid">
                <div class="row">
                    <div class="col-md-4">
                        <a class="btn btn-primary" data-toggle="collapse" href="#collapse-top-menu" role="button" aria-expanded="false" aria-controls="collapse-top-menu">
                            <img src="img/baseline-menu-24px.svg">
                        </a>
                    </div>
                    <div class="col-md-8 pull-right">
                        <a class="navbar-brand" href="#">
                            <img src="img/bootstrap-solid.svg" width="40" height="40">
                            <span>Test</span>
                         </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="collapse" id="collapse-top-menu">
                            <input type="text" class="form-control" id="input-top-collapse-search" placeholder="Cosa stai cercando?">
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>

.collapse input{
  width:100%;
}

.折叠输入{ 宽度：100%； }

---

通常，在bootstrap.css中，表单控件类已设置为宽度：100%。所以，如果你不改变css中的任何内容，你的输入应该是全宽度的。您是否在css中为“折叠”类或“折叠顶部菜单”id设置了宽度属性？甚至是“输入顶部折叠搜索”id？整个css都在我在答案中发布的HTML中，但正如您在这里看到的，输入顶部折叠搜索和折叠顶部菜单都存在。我该怎么把它全宽？嘿！谢谢你的建议。我现在不能尝试，因为我的显示器坏了，但我会尽快让你知道它是否有效！通过删除navbar品牌的img，汉堡菜单和navbar品牌文本完全对齐。这是一个代码笔来尝试它。现在的问题是，当菜单打开时，输入框没有填充父窗口，更多的是，当我点击汉堡菜单时，有一个微妙的“测试”运动！谢谢你的建议！我一把显示器修好就去试试，告诉你这是否管用！代码笔很不幸，这不起作用