Wordpress确实在我的代码中添加了不需要的html标签

问题描述 投票：0回答：1

我不明白为什么wp添加了一些不必要的内容

</p>

标记到我可爱的html。我想念什么吗？问题：它使这些为空

</p>

因此在我的引导卡的底部创建一个3rem边框，而不是1px。

新页面：

  • 将可视编辑器切换为[文本]
  • 插入我的html代码
  • 更新页面

// HTML代码在Vs Studio格式化后看起来像这样

<div class="container-fluid p-0">
   <div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">

      <div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
         <h4>Flexible height</h4>
         <h4>Responsive</h4>
      </div>

      <div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">

         <div class="col px-2">
            <div class="card bg-gradient-primary shadow align-content-center list-unstyled">
               <img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage">
               <div class="card-img-overlay  pt-2 pb-3 px-2">
                  <p class="card-text">Cards can be used for images, supporting text below/above</p>
                  <div class="d-flex justify-content-between align-items-center">
                     <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">View</button>
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">Edit</button>
                     </div>
                     <p>
                        <small>123 Tag</small>
                     </p>
                  </div>
               </div>
            </div>


         </div>

      </div>

   </div>

</div>

这是“查看页面源代码”中的已编译html代码



<h1>gallery</h1>
<div class="container-fluid p-0">
<div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">
<div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
<h4>Flexible height</h4>
<h4>Responsive</h4>
</p></div>
<div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col px-2">
<div class="card bg-gradient-primary shadow align-content-center list-unstyled">
               <img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage"></p>
<div class="card-img-overlay  pt-2 pb-3 px-2">
<p class="card-text">Cards can be used for images, supporting text below/above</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">View</button><br />
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">Edit</button>
                     </div>
<p>
                        <small>123 Tag</small>
                     </p>
</p></div>
</p></div>
</p></div>
</p></div>
</p></div>
</p></div>
</div>
            </div>
         </div>
      </div>
   </div>
</div>

[[创建这些空p´s [1]以及：

<br />

//第一个按钮之后...嗯，这似乎有点奇怪，因为我认为html是独立于缩进的。当在page.php中开发我的图像卡网格时（为了便于开发），它可以按预期工作，但是将相同的代码移到wp页面（post）中时会发生这是页面html的标题和正文，该块位于末尾：（因为我制作了一些html小部件，这可能会造成一些麻烦，因为侧边栏位于内容列之前）


<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel='dns-prefetch' href='//s.w.org' />
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/wp_susi\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.3.2"}};
            !function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!c([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings);
        </script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
    <link rel='stylesheet' id='wp-block-library-css'  href='http://localhost/wp_susi/wp-includes/css/dist/block-library/style.min.css?ver=5.3.2' type='text/css' media='all' />
<link rel='stylesheet' id='wc-block-style-css'  href='http://localhost/wp_susi/wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/style.css?ver=2.4.5' type='text/css' media='all' />
<link rel='stylesheet' id='woocommerce-layout-css'  href='http://localhost/wp_susi/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='woocommerce-smallscreen-css'  href='http://localhost/wp_susi/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=3.8.1' type='text/css' media='only screen and (max-width: 768px)' />
<link rel='stylesheet' id='woocommerce-general-css'  href='http://localhost/wp_susi/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=3.8.1' type='text/css' media='all' />
<style id='woocommerce-inline-inline-css' type='text/css'>
.woocommerce form .form-row .required { visibility: visible; }
</style>
<link rel='stylesheet' id='yts-main-style-css'  href='http://localhost/wp_susi/wp-content/plugins/youtubesubs/css/style.css?ver=5.3.2' type='text/css' media='all' />
<link rel='stylesheet' id='yts-main-script-css'  href='http://localhost/wp_susi/wp-content/plugins/youtubesubs/js/main.js?ver=5.3.2' type='text/css' media='all' />
<link rel='stylesheet' id='stylesheet-css'  href='http://localhost/wp_susi/wp-content/themes/susi-woo/style.css?ver=1' type='text/css' media='all' />
<link rel='stylesheet' id='custom-css'  href='http://localhost/wp_susi/wp-content/themes/susi-woo/app.css?ver=1' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wp_susi/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script>
<script type='text/javascript' src='http://localhost/wp_susi/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='http://localhost/wp_susi/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wp_susi/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wp_susi/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 5.3.2" />
<meta name="generator" content="WooCommerce 3.8.1" />
<link rel="canonical" href="http://localhost/wp_susi/gallery/" />
<link rel='shortlink' href='http://localhost/wp_susi/?p=1382' />
<link rel="alternate" type="application/json+oembed" href="http://localhost/wp_susi/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fwp_susi%2Fgallery%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost/wp_susi/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fwp_susi%2Fgallery%2F&#038;format=xml" />
    <noscript><style>.woocommerce-product-gallery{ opacity: 1 !important; }</style></noscript>
    <meta charset    = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name       = "viewport" content        = "width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link rel        = "stylesheet" href         = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->

<meta name       = "description" content     = "T-Shirt Design &amp; Print">
<title>susi-test |  &raquo; gallery</title>
</head>

<body class="page-template-default page page-id-1382 main-body view theme-susi-woo woocommerce-no-js" style="background-image: url('http://localhost/wp_susi/wp-content/uploads/2020/01/bg-body.png'); background-attachment:fixed; background-repeat:repeat; background-position:center center;">
   <header>

      <div class="container">

         <div class="row">
            <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-gradient-dark shadow-lg">

               <div class="col-2 col-lg-1 text-left text-lg-right align-self-start align-self-lg-center">
                  <a class="navbar-brand m-0 p-0" href="http://localhost/wp_susi"><img src="http://localhost/wp_susi/wp-content/themes/susi-woo/images/logo.png" width="30px" height="30px" class="d-inline-block" alt="Thumbnail image"></a>
               </div><!--// col nav brand -->

               <div class="col-8 col-lg-10 text-center">
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div id="navbarSupportedContent" class="collapse navbar-collapse justify-content-center"><ul id="menu-primary-menu" class="navbar-nav"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-831" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-831 nav-item"><a title="Home" href="http://localhost/wp_susi/" class="nav-link">Home</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-837" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-837 nav-item"><a title="Shop" href="http://localhost/wp_susi/shop/" class="nav-link">Shop</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-858" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-858 nav-item"><a title="Blog" href="http://localhost/wp_susi/category/blog/" class="nav-link">Blog</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-832" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-832 nav-item"><a title="About Us" href="http://localhost/wp_susi/about-us/" class="nav-link">About Us</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-835 nav-item"><a title="Contact Us" href="http://localhost/wp_susi/contact-us/" class="nav-link">Contact Us</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-860" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-860 nav-item"><a title="News" href="http://localhost/wp_susi/category/news/" class="nav-link">News</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-859" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-859 nav-item"><a title="My account" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle nav-link" id="menu-item-dropdown-859">My account</a>
<ul class="dropdown-menu" aria-labelledby="menu-item-dropdown-859" role="menu">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-836" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-836 nav-item"><a title="My account" href="http://localhost/wp_susi/my-account/" class="dropdown-item">My account</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-834" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-834 nav-item"><a title="Checkout" href="http://localhost/wp_susi/checkout/" class="dropdown-item">Checkout</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-833" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-833 nav-item"><a title="Cart" href="http://localhost/wp_susi/cart/" class="dropdown-item">Cart</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-925" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-925 nav-item"><a title="buttons" href="http://localhost/wp_susi/buttons/" class="dropdown-item">buttons</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1062" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1062 nav-item"><a title="icon buttons" href="http://localhost/wp_susi/glyphicon/" class="dropdown-item">icon buttons</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-957" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-957 nav-item"><a title="nav" href="http://localhost/wp_susi/nav/" class="dropdown-item">nav</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-924" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-924 nav-item"><a title="cards" href="http://localhost/wp_susi/cards/" class="dropdown-item">cards</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-940" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-940 nav-item"><a title="list groups" href="http://localhost/wp_susi/list-groups/" class="dropdown-item">list groups</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1304" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1304 nav-item"><a title="collapse" href="http://localhost/wp_susi/collapse-2/" class="dropdown-item">collapse</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1356" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1356 nav-item"><a title="accordion" href="http://localhost/wp_susi/accordion/" class="dropdown-item">accordion</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-943" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-943 nav-item"><a title="modal" href="http://localhost/wp_susi/modal/" class="dropdown-item">modal</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-969" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-969 nav-item"><a title="collapse2" href="http://localhost/wp_susi/collapse/" class="dropdown-item">collapse2</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1011" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1011 nav-item"><a title="text-truncate" href="http://localhost/wp_susi/1010-2/" class="dropdown-item">text-truncate</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-979 nav-item"><a title="formator" href="http://localhost/wp_susi/formator/" class="dropdown-item">formator</a></li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1017 nav-item"><a title="badge" href="http://localhost/wp_susi/badge/" class="dropdown-item">badge</a></li>
</ul>
</li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1150 nav-item"><a title="text" href="http://localhost/wp_susi/text-2/" class="nav-link">text</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1225" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1225 nav-item"><a title="colors" href="http://localhost/wp_susi/colors/" class="nav-link">colors</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1298" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1298 nav-item"><a title="shadows" href="http://localhost/wp_susi/shadows/" class="nav-link">shadows</a></li>
<li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-1383" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1382 current_page_item active menu-item-1383 nav-item"><a title="gallery" href="http://localhost/wp_susi/gallery/" class="nav-link" aria-current="page">gallery</a></li>
</ul></div>                  </div><!--// wp_menu -->
               </div>

               <div class="col-2 col-lg-1 ml-auto text-right text-lg-left align-self-start align-self-lg-center">
                  <a class="navbar-brand m-0 p-0" data-toggle="modal" href="#modalTronFront"><img src="http://localhost/wp_susi/wp-content/themes/susi-woo/images/logo2.png" width="30px" height="30px" class="d-inline-block" alt="Thumbnail image"></a>
               </div><!-- // col nav brand -->

            </nav>
         </div><!--// row -->

      </div><!--// container -->

   </header>




   <div class="content mt-9 mb-6">
   <div class="container">
      <div class="row">
         <div class="col-lg-3 d-none d-lg-block">
            <div class="sticky-top list-unstyled" style="top:80px">

<li id="meta-3" class="widget widget_meta"><h4>Direct Links</h4>            <ul>
                        <li><a href="http://localhost/wp_susi/wp-login.php">Log in</a></li>
            <li><a href="http://localhost/wp_susi/feed/">Entries feed</a></li>
            <li><a href="http://localhost/wp_susi/comments/feed/">Comments feed</a></li>
            <li><a href="https://wordpress.org/">WordPress.org</a></li>         </ul>
            </li><li id="archives-3" class="widget widget_archive"><h4>Archives</h4>        <ul>
                <li><a href='http://localhost/wp_susi/2020/01/'>January 2020</a></li>
    <li><a href='http://localhost/wp_susi/2019/12/'>December 2019</a></li>
    <li><a href='http://localhost/wp_susi/2019/11/'>November 2019</a></li>
        </ul>
            </li><li id="tag_cloud-2" class="widget widget_tag_cloud"><h4>Tag Cloud</h4><div class="tagcloud"><a href="http://localhost/wp_susi/tag/new-tag/" class="tag-cloud-link tag-link-32 tag-link-position-1" style="font-size: 8pt;" aria-label="new Tag (1 item)">new Tag</a>
<a href="http://localhost/wp_susi/tag/test-1/" class="tag-cloud-link tag-link-12 tag-link-position-2" style="font-size: 22pt;" aria-label="test 1 (2 items)">test 1</a>
<a href="http://localhost/wp_susi/tag/test-2/" class="tag-cloud-link tag-link-13 tag-link-position-3" style="font-size: 22pt;" aria-label="test 2 (2 items)">test 2</a>
<a href="http://localhost/wp_susi/tag/test-3/" class="tag-cloud-link tag-link-14 tag-link-position-4" style="font-size: 8pt;" aria-label="test 3 (1 item)">test 3</a>
<a href="http://localhost/wp_susi/tag/test-4/" class="tag-cloud-link tag-link-15 tag-link-position-5" style="font-size: 22pt;" aria-label="test 4 (2 items)">test 4</a></div>
</li><li id="custom_html-3" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><h4  class = "mt-1 mb-3">Social</h4>
<div class = "d-flex flex-row">
<a class="social-inner btn btn-outline-success" style="width: 20%;" href="#" aria-label="Facebook" target="_blank" rel="noopener noreferrer"><span class = "fab fa-facebook fa-1x" aria-hidden = "true"></span></a>
<a class="social-inner btn btn-outline-warning" style="width: 20%;" href="#" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><span class = "fab fa-twitter fa-1x" aria-hidden         = "true"></span></a>
<a class="social-inner btn btn-outline-danger" style="width: 20%;" href="#" aria-label="Google Plus" target="_blank" rel="noopener noreferrer"><span class = "fab fa-google-plus fa-1x" aria-hidden     = "true"></span></a>
<a class="social-inner btn btn-outline-info" style="width: 20%;" href="#" aria-label="Instagram" target="_blank" rel="noopener noreferrer"><span class = "fab fa-instagram fa-1x" aria-hidden       = "true"></span></a>
</div></div></li><li id="custom_html-11" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div class="d-flex justify-content-center mt-4">
<a class="btn btn-primary" href="#modalTronFront" data-toggle="modal">Intoroduction</a></div></div></li><li id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div class="d-flex flex-row mt-3 pb-3">
<a class = "btn btn-outline-primary" href = "#top" style="width: 80%;">To Top</a>
</div></div></li>            </div>
         </div>
         <div class="col-lg-9 px-0" id="page">










<h1>gallery</h1>
<div class="container-fluid p-0">
<div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">
<div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
<h4>Flexible height</h4>
<h4>Responsive</h4>
</p></div>
<div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col px-2">
<div class="card bg-gradient-primary shadow align-content-center list-unstyled">
               <img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage"></p>
<div class="card-img-overlay  pt-2 pb-3 px-2">
<p class="card-text">Cards can be used for images, supporting text below/above</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">View</button><br />
                        <button type="button" class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;">Edit</button>
                     </div>
<p>
                        <small>123 Tag</small>
                     </p>
</p></div>
</p></div>
</p></div>
</p></div>
</p></div>
</p></div>
</div>
            </div>
         </div>
      </div>
   </div>
</div>

在某些情况下，WordPress编辑器会进行格式化：在仪表板中，将新代码插入到新页面中之后，切换到可视化编辑器并返回到文本编辑器模式。之后来自wp的代码看起来像这样，并且卡的外观有些不同，因为寻找img标签的右括号

<div class="container-fluid p-0">
<div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">
<div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
<h4>Flexible height</h4>
<h4>Responsive</h4>
</div>
<div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col px-2">
<div class="card bg-gradient-primary shadow align-content-center"><img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage" />
<div class="card-img-overlay pt-2 pb-3 px-2">
<p class="card-text">Cards can be used for images, supporting text below/above</p>

<div class="d-flex justify-content-between align-items-center">
<div class="btn-group"><button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">View</button>
<button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">Edit</button></div>
<small>123 Tag</small>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

和页面渲染





<h1>gallery</h1>
<div class="container-fluid p-0">
<div class="jumbotron w-100 bg-danger text-light px-3 pt-4 pb-2" style="text-shadow: -1px -1px 2px #000000;">
<div class="d-flex justify-content-between align-items-center px-3 pt-0 pb-2 mb-2">
<h4>Flexible height</h4>
<h4>Responsive</h4>
</div>
<div class="row no-gutters row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col px-2">
<div class="card bg-gradient-primary shadow align-content-center"><img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage" /></p>
<div class="card-img-overlay pt-2 pb-3 px-2">
<p class="card-text">Cards can be used for images, supporting text below/above</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group"><button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">View</button><br />
<button class="btn btn-sm btn-outline-light" style="box-shadow: -1px -1px 2px #000000;" type="button">Edit</button></div>
<p><small>123 Tag</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
            </div>
         </div>
      </div>
   </div>
</div>

很多p都消失了，但是现在img标签的右括号已受伤，并且也添加了p

<div class="card bg-gradient-primary shadow align-content-center"><img class="card-img" src="http://localhost/wp_susi/wp-content/uploads/2020/01/image-19.jpg" alt="CardImage" /></p>
´´´

  [1]: https://imgur.com/a/3lPkT1G
html wordpress bootstrap-4 indentation code-formatting
1个回答
0
投票

我发现了问题，在Bootstrap松弛状态下，我得到了解决方案：只需将以下代码段添加到Wordpress functions.php

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.