CSS Bootstrap 下拉位置出现在错误的位置答案

【问题标题】：CSS Bootstrap Dropdown location appearing in wrong placeCSS Bootstrap 下拉位置出现在错误的位置
【发布时间】：2015-12-08 17:11:18
【问题描述】：

我有一个带有四个按钮的水平导航栏。第三个按钮是一个下拉菜单，但下拉菜单出现在导航栏的最左侧，它应该在“服务”按钮的正下方。

HTML：

    <div class="nav dropdown">

        <button type="button" class="btn btn-primary col-md-3"><a href="Home.html"> Home </a></button>
        <button type="button" class="btn btn-primary col-md-3"><a href="AboutUs.html"> About Us </a></button>
        <button class="btn btn-primary dropdown-toggle col-md-3" type="button" data-toggle="dropdown">Services <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="ResServices.html">Residential</a></li>
                <li><a href="ResServices.html"></a><a href="CommServices.html">Commercial</a></li>
            </ul>
        <button type="button" class="btn btn-primary col-md-3"><a href="CommServices.html">Contact Us</a></button>

    </div>

CSS：

.nav {
    background-color: #171818;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #E3E3E3;
    height: 60px;
    padding-top: 10px;
    text-align: center;

}

.nav a:link{
    color: #000000;
}

.nav a:visited {
    color: #000000;
}

这里是乱七八糟的代码：

http://www.bootply.com/iSLasxAcEI

到目前为止，我已经尝试将第三个按钮分成另一个单独的 <div>，但它在该按钮和其他按钮之间留下了空隙，并且我尝试对 Bootstrap 下拉类进行其他更改。

我一直试图让它直接放在“服务”按钮下方，但没有成功。任何帮助将不胜感激！

我对使用 CSS 和 Bootstrap 还很陌生，但如果我能做些什么来帮助使问题更清楚，请告诉我！

【问题讨论】：

你能提供一些代码示例吗？这可能会有所帮助。另外，你能解释一下你已经尝试过什么吗？
我遇到了类似的问题，我已通过将data-boundary="element" 添加到切换元素（BS4.5）来解决

标签： html css twitter-bootstrap drop-down-menu

【解决方案1】：

我已经回答过了。之前的问题你删了吗？

     <div class="nav dropdown">
        <button type="button" class="btn btn-primary col-md-3"><a href="Home.html"> Home </a></button>
        <button type="button" class="btn btn-primary col-md-3"><a href="AboutUs.html"> About Us </a></button>
       <div class="btn-group col-md-3" role="group" style="margin: 0px; padding: 0px">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                style="width: 100%">
          Dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
        <button type="button" class="btn btn-primary col-md-3"><a href="ContactUs.html"> Contact Us </a></button>
    </div>

您所要做的就是从 btn-group 类中删除 padding 和 margin。

【讨论】：

【解决方案2】：

试试下面的代码：
将以下样式代码添加到“下拉菜单”类

    position: relative !important;
    margin: 47px -264px 0 !important;

您的链接中没有在编辑器中提及“下拉菜单”类。它被添加到未显示在编辑器中的引导文件中。因此，将上述代码与“！important”内联应用到“下拉菜单”类或将其添加到您的自定义 css 文件中。

【讨论】：