Question

我正在制作一个网站，我目前正在处理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>

但是最终结果是这样的

虽然我希望第一个蓝色按钮和“徽标”（B）对齐，但在导航栏的右侧部分进行了更多“测试” 另外，底部搜索栏的宽度应与容器的宽度相同，因此全长

Answer 1

我正在使用移动Stack Overflow应用程序，因此无法对其进行测试。在Bootstap 4中，可以将测试放在导航栏的右侧，

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

还可以通过使用一些上边距来对齐蓝色按钮（这里使用的按钮称为汉堡，请记住）。

只需使用CSS选择器选择汉堡包，然后为其提供一些 margin-top 属性。

请考虑添加一个代码笔，以便我们的移动用户可以使用您的代码。

Bootstrap 4列对齐问题

2 个答案: