html - Bootstrap 3 - 列表组元素问题 : excess p tags

Question

遇到一个奇怪的问题，即 HTML 标记的呈现方式与我的输入不同。我使用的是 Twitter Bootstrap 3 和 WordPress 3.9.2，以及 Chrome 作为浏览器(最新版本)。

我的 HTML:

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">Important</h4>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Heading 1</h4>
    <p class="list-group-item-text">Text for this area can go here</p>
  </a>
</div>

这与 Twitter Bootrap 文档网站上的记录完全相同: http://getbootstrap.com/components/#list-group-custom-content

但是由于某些奇怪的原因，当我加载页面时，我的 HTML 变成了:

<div class="list-group">
  <a href="#" class="list-group-item active">
    <p></p>
    <h4 class="list-group-item-heading">Important</h4>
  </a>
  <p>
    <a href="#" class="list-group-item active"></a>
    <br>
    <a href="#" class="list-group-item"></a>
  </p>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Heading 1</h4>
    <p class="list-group-item-text">Text for this area can go here</p>
  </a>
  <p>
    <a href="#" class="list-group-item"></a>
  </p>
</div>

如您所见，它添加了额外的 a、p 和 br 标签 - 并且还复制了一些类。我什至将我的输入 HTML 缩小到标签之间没有空格，但仍然会发生这种情况。我也试过在浏览器中禁用 JavaScript。

结果图片在这里:
http://i.imgur.com/RylFfvW.png
http://i.imgur.com/5h3TONs.png

有什么想法吗？

提前致谢。

Answer 1

所以我找出了罪魁祸首。 WordPress(默认情况下)添加了额外的标签，即使 WYSIWYG 编辑器显示的不是这样。奇怪的是，这在某些情况下会发生，而在其他情况下不会。

解决方案？将这段代码插入到您的 functions.php 文件中:

<?php remove_filter ('the_content', 'wpautop'); ?>

这将阻止生成不受欢迎的额外标签