Bootstrap v4.5 导航栏多行对齐和元素宽度答案

【问题标题】：Bootstrap v4.5 Navbar Multiline Alignment and Elements WidthBootstrap v4.5 导航栏多行对齐和元素宽度
【发布时间】：2021-07-16 19:13:51
【问题描述】：

经过多次尝试，我未能使用 Bootstrap v4.5 创建以下布局。我想要左侧的菜单按钮和顶行中间的徽标。第二行有全宽搜索文本框，文本框内有搜索图标。

如何做到这一点？

在她的here 和CSS 的帮助下，我能够对元素进行布局，但难以对齐，如下图所示，即 1) 右 div 未与左居中的 div 水平对齐 2) 搜索图标出现在上方左侧的文本框，而我试图将其保留在右侧的文本框中。减少文本框宽度没有帮助。

<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container bg-warning">
    <div class="d-flex flex-column w-100 justify-content-end bg-success p-1" id="navbarCollapse">
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <div class="bg-danger" id="left">left</div>
            <div class="bg-danger" id="center">center</div>
            <div class="bg-danger" id="right">right</div>
        </div>
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <i class="fa fa-search "></i>
            <input type=" text " class="form-control " placeholder="Search " />
        </div>
    </div>
</div>

    #container {
    width: 100%;
}

#left {
    float: left;
    width: 100px;
}

#right {
    float: right;
    width: 100px;
}

#center {
    margin: 0 auto;
    width: 100px;
}

【问题讨论】：

请显示您尝试过的代码，并说明该代码有什么问题。
对不起，之前应该这样做的。在编辑的内容中使用了您对布局的答案之一。

标签： bootstrap-4 navbar

【解决方案1】：

<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container bg-warning">
    <div class="d-flex flex-column w-100 bg-success" id="navbarCollapse">
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <div class="bg-danger" id="left">left</div>
            <div class="bg-danger" id="right">right</div>
            <div class="bg-danger" id="center">center</div>
        </div>
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <div class="input-group-append">
                <input type=" text " class="form-control " placeholder="Search " />
                <a href="#">
                    <i id="filtersubmit" class="fa fa-search "></i>
                </a>
            </div>
        </div>
    </div>
</div>

为了放置搜索图标，我使用了来自here 的 css，也复制了下来：

#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;

}

【讨论】：