it_proger29
@it_proger29
Битрикс

Почему записи прижимаются к левому краю?

Пытаюсь вывести записи wp в 3 столбика уже 4 день. Перепробовал все способы и перерыл весь интернет. Пробовал разные плагины, решил остановиться на post grid.

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

5bf93ebc46da9201522765.png
  • Вопрос задан
  • 152 просмотра
Решения вопроса 1
it_proger29
@it_proger29 Автор вопроса
Битрикс
Вот решение, которое мне помогло. Вывод новостей в 3 столбика.

<div class="col-md-10 centerM">
                <div class="row" style="margin-top: 10px;">

                        <?php $args = array(
    'numberposts'      => '6',
	'category'         => '',
	'orderby'          => 'date',
	'order'            => 'DESC',
	'post_type'        => 'post',
	'post_status'      => 'publish',
	'suppress_filters' => true,
);
$posts = get_posts( $args );
    foreach($posts as $post){ setup_postdata($post);
                            ?>
                            
                    <div class="col-md-4 col-lg-4 centerM">
                        <div class=" newsPost">
                            <img src="<?php the_post_thumbnail_url() ?>" alt="">
                            <p><i class="fa fa-hourglass-end"></i> <?php the_time('F, d, Y'); ?></p>
                            <p><?php the_title();?></p>
                            <p><?php the_excerpt();?></p>
                            <a href="<?php the_permalink();?>" style="text-decoration: underline; color: #8A8A8A;">Читать</a>
                        </div>
                    </div>
                            
<?php
}
    wp_reset_postdata();
    ?>
                </div>
            </div>


.newstext{
    margin: 0px;
    padding: 0px;
}
.newstext p{
    margin: 0px;
    padding: 0px;
    color: #008629;
    font-size: 40px;
}
.newsPost{
    padding-bottom: 20px;
    margin-bottom: 15px;
    background-color: #ffffff;
    transition: 0.4s;
}
.newsPost:hover{
    box-shadow: 0.4em 0.9em 20px rgba(122,122,122,0.5);
}
.newsPost p:nth-child(2){
    font-size: 13px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-bottom: 10px;
    color: #8A8A8A;
}
.newsPost p:nth-child(3){
    font-size: 20px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-bottom: 10px;
}
.newsPost p:nth-child(4){
    font-size: 13px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-bottom: 10px;
}
.newsPost a{
    font-size: 15px;
    padding-left: 10px;
    padding-bottom: 10px;
}
.newsPost img{
    width: 100%;
    padding-bottom: 10px;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
azerphoenix
@azerphoenix
Java Software Engineer
Здравствуйте!
На самом деле вы предоставили мало информации...
Вы сказали, что у вас бутстрап.. случайно не 4-й версии? Так как в 4-я версия построена на флексах. Что если тут виноват флексбокс, а точнее его некорректное использование...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы