我在使用Bootstrap 3构建的可折叠侧导航器在我正在使用的网站上运行时遇到了一些麻烦。我已经开始在<li>
之间获得太多的垂直空间,但我无法弄清楚它来自何处。我认为它可能来自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>
我现在已经盯着这一段时间 - 任何帮助都会受到赞赏。
编辑:更具体一点 - 我想减少项目之间的垂直空间。他们似乎正在获得任意高的高度,但是当我试图指定一个高度时它会打破崩溃行为。
答案 0 :(得分:1)
在这里回答我自己:
这是由<br>
标记插入代码引起的。这会随着Wordpress不时出现,通常可以通过向functions.php添加两行代码来处理,如下所示:
http://codex.wordpress.org/Function_Reference/wpautop
我在我的functions.php中有这个,所以看起来很可能是因为插件而被插入(我还没有明确地弄明白哪一个)。临时修复正在添加:
.sidebar-nav br {
display: none;
}
到自定义CSS文件。看起来很可能这些是由SiteOrigin的PageBuilder插件添加的,否则这是一个非常好的插件。如果我能够明确地确定这一点,我会在这里更新。