带有可折叠侧导航和 Bootstrap 3 的幻影间距
Posted
技术标签:
【中文标题】带有可折叠侧导航和 Bootstrap 3 的幻影间距【英文标题】：Phantom spacing with collapsible side nav and Bootstrap 3 【发布时间】：2013-12-20 12:32:59 【问题描述】：让使用 Bootstrap 3 构建的可折叠侧导航在我正在处理的网站上运行时遇到了一些麻烦。我已经开始在<li>s 之间获得太多的垂直空间，但我不知道它是从哪里来的。我认为它可能来自 Wordpress 添加 <p> 和 <br> 标签，虽然这当然没有帮助，但它似乎也不是主要问题。
一个示例网址是：
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>
我已经盯着这个看了一段时间了 -- 任何帮助都将不胜感激。
编辑：更具体地说——我想减少项目之间的垂直空间。它们似乎得到了任意高的高度，但是当我尝试指定高度时，它会破坏折叠动作。
【问题讨论】：
查看 Chrome 开发工具中的实时标记，您的span.nav-header-primary 元素中的 <br> 标记添加了 很多 空间。在开发工具中删除它们会占用大量空间。 ul#sidenav-accordion 元素也将 <p> 元素添加为子元素，我相当确定这是无效标记（<ul> 应该只有 <li> 子元素），尽管布局似乎不受影响。额外的<br>s 存在于服务器的原始页面源中，因此服务器正在添加它们。<p> 标记不存在于原始源中，因此 JS 必须添加它们。
感谢您查看此内容。似乎某些插件必须覆盖我在我的functions.php中对“wpautop”的覆盖，并且正在添加各种“”和“”标签。看起来确实是那些单独导致间距的问题。我现在的猜测是，这是其他出色的 PageBuilder 插件导致的。
【参考方案1】：在这里回答我自己的问题：
这是由于<br> 标记被插入到代码中造成的。 Wordpress 时不时会出现这种情况，通常可以通过在 functions.php 中添加两行代码来处理，如下所示：
http://codex.wordpress.org/Function_Reference/wpautop
我在我的functions.php中有这个，所以它们似乎是由于插件而被插入的（我还没有明确地弄清楚是哪一个）。正在添加一个临时修复：
.sidebar-nav br
display: none;
到自定义 CSS 文件。似乎这些是由 SiteOrigin 的 PageBuilder 插件添加的，否则它是一个非常棒的插件。如果我能够确定这一点，我会在这里更新。
【讨论】：
如果您最终找到了解决方案并在这里发回，我会将其作为答案发布并接受它，并更改标题以反映核心问题，以便其他人可以从中受益你的发现在路上。祝你好运！以上是关于带有可折叠侧导航和 Bootstrap 3 的幻影间距的主要内容，如果未能解决你的问题，请参考以下文章
带有 jQuery 和 Bootstrap 3 的可折叠响应式侧边栏菜单
Bootstrap 3 Navbar 左侧和右侧导航栏项目的左侧折叠菜单