html - CSS Bootstrap 下拉位置出现在错误的位置

Question

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

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 还很陌生，但如果我能做些什么来帮助使问题更清楚，请告诉我!

Answer 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。