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下拉类进行其他更改。< / p>

我一直试图让它直接落在＆＃39;服务＆＃39;按钮，但没有用。任何帮助将不胜感激！

我使用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>

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

Answer 2

尝试以下代码：
将以下样式代码添加到＆＃34;下拉菜单＆＃34;类

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

＆＃34;下拉菜单＆＃34;您的链接在编辑器中未提及类。它添加在未在编辑器中显示的引导程序文件中。所以将以上代码应用于＆＃34;！important＆＃34;内联到＆＃34;下拉菜单＆＃34;将其添加到自定义css文件中。

CSS Bootstrap下拉位置显示在错误的位置

2 个答案: