Bootstrap 3 - 列表組元素問題：多餘的p標籤

有一個奇怪的問題，HMTL標記與我的輸入相比呈現不同。我使用的是Twitter Bootstrap 3 & WordPress 3.9.2，以及Chrome作爲瀏覽器（最新版本）。Bootstrap 3 - 列表組元素問題：多餘的p標籤

我的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

任何想法？

在此先感謝。

來源

2014-11-17 Brett

你在哪裏添加此代碼停止額外的標籤？在wysiwyg編輯器中？你有沒有在編輯器中選擇「文本」標籤？ – peppeocchi

是 - 在wysiwig編輯器中。 – Brett

因此，我發現了什麼是罪魁禍首。 WordPress（默認情況下）添加了額外的標籤，即使所見即所得編輯器顯示其他情況。奇怪的是，這發生在一些場合&不是別人。

解決方案？插入此片段到你的functions.php文件：

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

這將被unwelcomely產生

來源

2014-11-17 23:48:03 Brett

Bootstrap 3 - 列表組元素問題：多餘的p標籤

回答

相關問題