我有一个小麻烦，得到一个可折叠的侧导航与引导3建立在一个网站上的行为我正在工作。我开始在<li>s之间获得太多的垂直空间，但我不知道它是从哪里来的。我认为这可能是Wordpress添加<p>和<br>标记的结果，虽然这对它毫无帮助，但似乎也不是主要问题。
示例URL是：
http://cbipath.com/arabic/aa-tax-regulations-that-protect-the-rich/
所讨论的代码是：
（请注意，这仍然是一项正在进行的工作，因此到处都是断开的链接等。）
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="sidebar-nav">
<p class="sidenav-header">
Units and Lessons:
</p>
<ul class="nav nav-list accordion" id="sidenav-accordion">
<li>
<div class="accordion-heading">
<a data-toggle="collapse" data-target="#content-areas"><span class="nav-header-primary">
Content Areas <i class="icon-chevron-right"></i>
</span></a>
</div>
<ul class="nav nav-list collapse" id="content-areas">
<li><a href="#" title="Title">All <i class="icon-chevron-right"></i></a>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-urban-planning"><span class="nav-header-secondary">
Urban Planning <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-urban-planning">
<li><a href="#" title="Title">Introduction</a>
</li>
<li><a href="#" title="Title">Urban Planning 1</a>
</li>
<li><a href="#" title="Title">Urban Planning 2</a>
</li>
<li><a href="#" title="Title">Urban Planning 3</a>
</li>
<li><a href="#" title="Title">Urban Planning 4</a>
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-sustainability"><span class="nav-header-secondary">
Sustainability <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-sustainability">
<li><a href="#" title="Title">Introduction</a>
</li>
<li><a href="#" title="Title">Sustainability 1</a>
</li>
<li><a href="#" title="Title">Sustainability 2</a>
</li>
<li><a href="#" title="Title">Sustainability 3</a>
</li>
<li><a href="#" title="Title">Sustainability 4</a>
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-public-administration"><span class="nav-header-secondary">
Public Administration <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-public-administration">
<li><a href="#" title="Title">Introduction</a>
</li>
<li><a href="#" title="Title">Public Administration 1</a>
</li>
<li><a href="#" title="Title">Public Administration 2</a>
</li>
<li><a href="#" title="Title">Public Administration 3</a>
</li>
<li><a href="#" title="Title">Public Administration 4</a>
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#content-areas" href="#nav-health"><span class="nav-header-secondary">
Health <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-health">
<li><a href="/mesc_cbi/introduction-health/" title="Title">Introduction</a>
</li>
<li><a href="/mesc_cbi/health/lesson-what-is-epilepsy-turkish/" title="Title">Lesson: What is Epilepsy? (Turkish)</a>
</li>
<li><a href="/mesc_cbi/health/lesson-what-is-epilepsy-turkish/" title="Title">Lesson: Pathology (Turkish)</a>
</li>
</ul>
</li>
</ul>
<!-- End Content Areas Internal UL -->
</li>
<!-- End Content Areas List Item-->
<li>
<!-- Begin Languages List Item-->
<div class="accordion-heading">
<a data-toggle="collapse" data-target="#languages"><span class="nav-header-primary">
Languages <i class="icon-chevron-right"></i>
</span></a>
</div>
<ul class="nav nav-list collapse" id="languages">
<li><a href="#" title="Title">All <i class="icon-chevron-right"></i></a>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#languages" href="#nav-arabic"><span class="nav-header-secondary">
Arabic <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-arabic">
<li><a href="/cbi/arabic/" title="Title">Overview</a>
</li>
<li><a href="/cbi/arabic/education-and-democracy-in-the-arab-world/" title="Title">Education and Democracy in the Arab World</a>
</li>
<li><a href="/arabic/tax-regulations-that-protect-the-rich/" title="Title">Tax Regulations that Protect the Rich</a>
</li>
<li><a href="/cbi/arabic/minorities-in-the-arab-world/" title="Title">Minorities in the Arab World</a>
</li>
<li><a href="/cbi/arabic/revolution-equality-and-womens-rights/" title="Title">Revolution, Equality, and Women's Rights</a>
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#languages" href="#nav-turkish"><span class="nav-header-secondary">
Turkish <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-turkish">
<li><a href="/cbi/turkish/" title="Title">Overview</a>
</li>
<li><a href="/cbi/turkish/what-is-epilepsy/" title="Title">Lesson: What is Epilepsy?</a>
</li>
<li><a href="/cbi/turkish/what-is-pathology/" title="Title">Lesson: Pathology</a>
</li>
<li><a href="/cbi/turkish/what-is-pathology/" title="Title">Lesson: Pathology</a>
</li>
</ul>
</li>
<li>
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#languages" href="#nav-hebrew"><span class="nav-header-secondary">
Hebrew <i class="icon-chevron-right"></i></span></a>
</div>
<ul class="nav-tertiary nav-list collapse" id="nav-hebrew">
<li><a href="/cbi/hebrew/" title="Title">Overview</a>
</li>
<li><a href="/cbi/hebrew/israels-declaration-of-independence/" title="Title">Israel's Declaration of Independence</a>
</li>
</li>
</ul>
</li>
</ul>
</li>
<!-- End Languages List Item-->
</ul>
</div>
我已经盯着这个看了一段时间了--如果有什么帮助我会很感激的。
编辑：更具体地说——我想减少项目之间的垂直间距。它们看起来有任意的高度，但是当我试图指定一个高度时，它会破坏崩溃动作。
最佳答案
在这里回答我自己的问题：
这是由于代码中插入了<br>标记造成的。这是Wordpress不时出现的问题，通常可以按照以下说明向functions.php添加两行代码来处理：
http://codex.wordpress.org/Function_Reference/wpautop
我在functions.php中有这个功能，所以它们很可能是由于一个插件而被插入的（我还没有确定到底是哪个插件）。临时修复正在添加：
.sidebar-nav br {
display: none;
}
到自定义CSS文件。看起来这些可能是由SiteOrigin的PageBuilder插件添加的，而SiteOrigin则是一个非常棒的插件。如果我能确定的话，我会在这里更新。
关于html - 幻像间距以及可折叠的侧面导航和Bootstrap 3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20368308/