Щебет Bootstrap 3.1 Размером наложения в стеке

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, который он использовал по сравнению с моим, совсем другой, поскольку у меня нет навигационной панели, висящей сверху слева. В любом случае, мой вопрос в том, что между каждой отдельной кнопкой есть большие расстояния, и я не могу понять, какой или какой идентификатор или класс диктует этот интервал. Я хотел бы, чтобы они были, если это возможно, гораздо ближе друг к другу.

Я извиняюсь, если моя формулировка или фраза плохая, я только что начал кодировать HTML, поэтому я полностью отстаю от большинства возможных стандартов?

TL; DR - Корневые кнопки в моем навигационном меню сбрасывания сбрасываются слишком далеко друг от друга, как вы можете видеть из приведенного выше изображения, как мне сблизить их? Я бы взял CSS, но я не знаю, с каким классом взаимодействует с ними.

Answer 1

Вы применили класс .panel к элементам <li> в своем меню (я не уверен, почему). Bootstrap применяет 20px нижнего поля к элементам этого класса.

От начальной загрузки 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 имеют встроенные аналогичные инструменты.