Открытка Boostrap 4 на моем сайте выглядит иначе

Question

Я нашел фрагмент карты bootstrap 4, но когда я интегрировал его в свой плагин WordPress, он показался мне не таким, как в оригинальной форме. Я хочу показать сообщения в виде 3 столбцов.

Однако некоторые сообщения не имеет никакой картины - кто-то может объяснить, почему? Также форма gird не равна исходной форме.

Оригинальный фрагмент:

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, предполагается, что он нацелен на определенные размеры экрана, но я не думаю, что это необходимо, поскольку вы ничего не указали относительно разрешения.

Насчет чисел, это крыса ios столбцов. Поскольку вам нужны три одинаковых среза, вы можете игнорировать конечный номер, но просто не забудьте добавить три столбца.

Если мое объяснение кажется расплывчатым, обратитесь к документации .