Question

我对编码HTML和所有类型的业务都很陌生，所以我决定使用已经构建且坚固的API。因此，我选择了Twitter Bootstrap 3.1，因为我之前已经有了一些的经验。

无论如何，这是我目前的导航堆叠的样子。它的CSS被公平化了，因为我希望它可以折叠。

http://i.imgur.com/J8fPSJ6.jpg

以下是该特定代码段的代码。我摆脱了重复的部分以节省空间。

<div class="col-xs-3 sidebar" id="ASEsideNav">
          <!This is left Vertical Nav bar>
          <div class="navbar navbar-inverse" id="ASEsideNav">              
            <div class="collapse navbar-collapse" id="ASEsideNav">
              <ul class="nav nav-stacked" id="menu-bar"> <!-- Notice the "nav-stacked" class we added here -->
                <!-- We add the panel class to workaround collapsing menu items in Bootstrap -->
                <li class="panel dropdown">
                 <a data-toggle="collapse" data-parent="#menu-bar" href="#collapse1"> Safety</a>
                  <!-- Notice the ID of this element must match the href attribute in the <a> element above it. Also we have added the panel-collapse class -->
                  <ul id="collapse1" class="panel-collapse collapse">
                    <li><a href="#">Guardwell Perimeter Safety Products</a></li>
                  </ul>
                </li>

                <li class="panel dropdown">
                  <a data-toggle="collapse" data-parent="#menu-bar" href="#collapse2"> Kettles</a>
                  <ul id="collapse2" class="panel-collapse collapse">
                    <li><a href="#">Patch Kettles</a></li>
                    <li><a href="#">Asphalt Kettles</a></li>
                    <li><a href="#">Kettle Accessories</a></li>
                    <li><a href="#">Heat Transfer Kettles</a></li>
                    <li><a href="#">Emission Control System</a></li>
                  </ul>
                </li>

            </div>
          </div> <!End of navbar>
        </div>

正如你所看到的，它已被剔除了。这是我从其他页面转换别人的代码。该页面如此： http://www.jeffmould.com/2013/12/15/create-twitter-bootstrap-vertical-drop-menu/

他使用的CSS与我相比是完全不同的，因为我没有从左上方悬挂的导航栏。 无论如何，我的问题是，每个按钮之间有很大的间距，我无法弄清楚哪个或哪个ID或类正在规定该间距。如果可能的话，我希望他们能够更紧密地联系在一起。

如果我的措辞或措辞很差，我很抱歉，我刚刚开始编写HTML代码，所以我在大多数可能的标准上都落后了吗？

TL; DR - 我的导航堆叠折叠下拉菜单中的根按钮相距太远，正如您从上面链接的图片中看到的那样，如何将它们拉得更近？我会假设CSS，但我不知道哪个类与它们进行交互。

Answer 1

您已将课程.panel应用于菜单中的<li>元素（我不确定原因）。 Bootstrap将20px的底部边距应用于具有该类的元素。

来自bootstrap CSS：

.panel {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

您可以使用以下方法修复它：

#ASEsideNav .panel {
    margin-bottom: 0;
}

您可能需要查看Firefox的Firebug。它有一个CSS面板，可以帮助您对这类东西进行排序。 https://getfirebug.com/css。 Chrome和IE内置了类似的工具。

Twitter Bootstrap 3.1导航堆叠间距

1 个答案: