Html 引导程序4导航栏下拉列表问题

我试图将这个导航栏下拉菜单分成两列，但它们相互冲突

另一个问题是，在手机中，搜索栏停留在底部。页面没有响应。我不知道这是否是导航栏问题造成的。如有任何意见，将不胜感激。我希望你们都有一个美好的周末

html{
位置：相对位置；
最小高度：100%；
}
身体{
边缘底部：60px；
}
部分{
填充：70px0；
边框底部：1px点#ccc；
}
.grid示例div[class^=“col”]{
边框：1px纯白；
背景：浅蓝色；
文本对齐：居中；
填充顶部：8px；
垫底：8px；
}
琼伯伦先生{
背景色：淡天蓝；
}
表th{
文本对齐：居中；
}
.桌子{
保证金：自动；
宽度：50%！重要；
}
.表td{
文本对齐：居中；
}
.页脚{
位置：绝对位置；
底部：0；
宽度：100%；
高度：60px；
线高：60px；
颜色：#fff；
文本对齐：居中；
背景色：#C0；
}
a{
颜色：#f00；
}
a:悬停{
颜色：#0f0；
}

测验










你好，世界！
这是一个简单的英雄单元，一个简单的jumbotron风格的组件，用于唤起对特色内容或信息的额外关注


测验
在此处放置粘性页脚内容。

我将回答标题随附的下拉式问题。 您不希望在下拉列表中嵌套

容器

。同时增加下拉列表上的

min width

，以适合内容

bootstrap4中不再有

colxs-*

，它只是

col-*

       <div class="dropdown-menu" style="min-width:360px" aria-labelledby="navbarDropdown">
                <div class="row no-gutters">
                    <div class="col-sm-6">
                        <a class="dropdown-item px-2" href="#">Test Test Test</a>
                        <a class="dropdown-item px-2" href="#">Test Test</a>
                        <a class="dropdown-item px-2" href="#">Test</a>
                    </div>
                    <div class="col-sm-6">
                        <a class="dropdown-item px-2" href="#">itemitemitemitem</a>
                        <a class="dropdown-item px-2" href="#">itemitemitemitemitem</a>
                        <a class="dropdown-item px-2" href="#">item</a>
                    </div>
                </div>
       </div>