bootstrap navbar 2 div在另一个下方[重复]答案

【问题标题】：bootstrap navbar 2 divs one below another [duplicate]bootstrap navbar 2 div在另一个下方[重复]
【发布时间】：2020-01-30 15:12:32
【问题描述】：

我有以下代码，我希望 div1 高于 div2。我已经尝试使用 css 来完成它，如下所示，但我无法做到正确，并且 div 彼此相邻。既然我让他们两个都满了width:100%;和float:right;，他们不应该在彼此之下吗？

另外，我读到 clear:both; 应该可以解决问题，但它没有！

对此有什么想法吗？

谢谢

编辑： 我正在使用 Bootstrap 4.0.0。

<body>
    <header>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light top">
                <img src="images.png" alt="image" class="imageClass">
                <div class="div1 ">
                    <a href="#" id="id1">somthinghere</a>
                    <a href="#" class="active">link</a>
                    <a href="#" class="">link2</a>
                </div>
                <div class="collapse navbar-collapse div2" id="navbarsExampleDefault">
                    <ul class="navbar-nav ml-lg">
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link11</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link111</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1111</a>
                        </li>
                    </ul>                       
                </div>
            </nav>
        </div>
    </header>
</body>

CSS：

header{
    position:absolute;
    z-index: 10;
    width: 100%;
}

.div2{
    clear:both;
    width: 100%;
    float:right;        
}

.div1{
    width: 100%; 
    float:right;
}

【问题讨论】：

你使用的是什么引导版本？
可能值得一看：getbootstrap.com/docs/4.3/layout/grid
@tschaka1904 它是引导程序 4.0.0。我会修改我的问题。我检查并尝试了它，但仍然没有
您能否提供一个布局图像，以便我们看到您想要实现的目标？
@CharleneVas 添加了！基本上导航标签内有两个 div（彩色的）（大黑色的），每个彩色 div 都有自己的元素！

标签： html css bootstrap-4

【解决方案1】：

使用.row div 结合.col

演示：http://jsfiddle.net/dx5nL1hy/2/

【讨论】：

这是可行的，但它会阻止导航栏响应
@noel293：摆脱 .row div 应该会有所帮助