Bootstrap 4 明信片在我的网站上似乎有所不同

Question

我找到了一个 bootstrap 4 卡 sn-p，但是当我将它集成到我的 WordPress 插件时，它似乎与原始形式不同。我想将帖子显示为 3 列。

但是有些帖子没有任何图片 - 有人可以解释原因吗？并且网格形式不等于原始形式。

原始sn-p：

https://bootsnipp.com/snippets/kzbzW

我的网站： http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/03/fhhfh/

我的插件代码：

（我没有改变样式）

//paste
$args = array(
    'post_type' => $settings['post_type'],
    'author__in' => $settings['authors2'],
    'posts_per_page' => $settings['posts_per_page'],
    'orderby' => $settings['orderby'],
    'order' => $settings['order'],
);

echo'<div class="row">';
echo'<div class="col-md-12">';

$query = new \WP_Query($args);
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        //echo "<div style=background:blue> lsdkjf </div>";
       // get_template_part( 'template-parts/content', 'masonry' );
       // the_title();
        //the_content();
        ?>
<style>



    h1{
        text-align:center;
        margin-bottom:50px;
        margin-top:50px;
    }
    .blog-card-blog {
        margin-top: 30px;
    }
    .blog-card {
        display: inline-block;
        position: relative;
        width: 100%;
        margin-bottom: 30px;
        border-radius: 6px;
        color: rgba(0, 0, 0, 0.87);
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    .blog-card .blog-card-image {
        height: 60%;
        position: relative;
        overflow: hidden;
        margin-left: 15px;
        margin-right: 15px;
        margin-top: -30px;
        border-radius: 6px;
        box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    }
    .blog-card .blog-card-image img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        pointer-events: none;
    }
    .blog-card .blog-table {
        padding: 15px 30px;
    }
    .blog-table {
        margin-bottom: 0px;
    }
    .blog-category {
        position: relative;
        line-height: 0;
        margin: 15px 0;
    }
    .blog-text-success {
        color: #28a745!important;
    }
    .blog-card-blog .blog-card-caption {
        margin-top: 5px;
    }
    .blog-card-caption {
        font-weight: 700;
        font-family: "Roboto Slab", "Times New Roman", serif;
    }
    .fa {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .blog-card-caption, .blog-card-caption a {
        color: #333;
        text-decoration: none;
    }

    p {
        color: #3C4857;
    }

    p {
        margin-top: 0;
        margin-bottom: 1rem;
    }
    .blog-card .ftr {
        margin-top: 15px;
    }
    .blog-card .ftr .author {
        color: #888;
    }

    .blog-card .ftr div {
        display: inline-block;
    }
    .blog-card .author .avatar {
        width: 36px;
        height: 36px;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 5px;blog-
    }
    .blog-card .ftr .stats {
        position: relative;
        top: 1px;
        font-size: 14px;
    }
    .blog-card .ftr .stats {
        float: right;
        line-height: 30px;
    }

</style>
    <!-- <div class="col-md-2"> -->
        <div class="blog-card blog-card-blog">
            <div class="blog-card-image">
               <!--  <a href="#"> <img class="img" src=<?php //the_post_thumbnail(); ?>> </a> -->
                <?php the_post_thumbnail('medium', array('class' => 'img')); ?>
                <div class="ripple-cont"></div>
            </div>
            <div class="blog-table">
                <h6 class="blog-category blog-text-success"><i class="far fa-newspaper"></i> News</h6>
                <h4 class="blog-card-caption">
                    <a href="#"><?php the_title(); ?></a>
                </h4>
                <p class="blog-card-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                <div class="ftr">
                    <div class="author">
                        <a href="#"> <img src="https://picsum.photos/id/1005/5760/3840" alt="..." class="avatar img-raised"> <span>Lorem</span> </a>
                    </div>
                    <div class="stats"> <i class="far fa-clock"></i> 10 min </div>
                </div>
            </div>
        </div>
    </div>

</div>
<?php
                    //ekleme sonu







                }

            } else {
                echo "<div style=background:red> lsdkjf </div>";
            }

Answer 1

就个人而言，我看不出你在哪里实现了 Bootstrap4 的网格列：

我想将帖子显示为 3 列。

这就是你应该如何在 HTML 中实现它，因为我不使用 Javascript：

<div class="row">
  <div class="col">Content</div>
  <div class="col">Content</div>
  <div class="col">Content</div>
</div>

Bootstrap 将其行分成 12 部分，因此所有列的总和应为 12，否则可能会发生意外情况，但我从未尝试过。

对于您添加的 md 内容，它应该针对某些屏幕尺寸，但我认为没有必要，因为您没有指定有关分辨率的任何内容。

关于数字，它们是列的比率。由于您想要三个相等的切片，您可以忽略尾随数字，但请记住放入三列。

如果我的解释有点模糊，请参考documentation。