1

Я использую систему сетки бутстрапа на своей первой странице, чтобы отображать мои сообщения как 1 сообщение в первой строке, 3 сообщения во второй строке, 3 сообщения в третьей строке и т. Д. У меня проблемы с моим сообщения не выравниваются в моих столбцах col-md-4. Тем не менее, единственный раз, когда эта проблема возникает, это когда у меня заголовок длиннее одной строки (примеры ниже). Кто-нибудь знает, как я могу это исправить?Загрузочная сетка не выравнивается правильно

как это должно выглядеть ... enter image description here

, как это выглядит, когда у меня есть пост, который имеет название (или отрывок), который идет на несколько строк ... enter image description here

как вы может видеть пример post 12, перемещающийся полностью вправо (где он должен быть слева), например, столбцы 13 и 14 перемещаются снизу. Я не знаю, как исправить эту проблему, и я бы очень признателен за любую помощь!

мой передний page.php

<?php 
 
/* 
 
* Template Name: 
 
*/ 
 

 
get_header(); 
 
get_template_part ('inc/carousel'); 
 

 
$the_query = new WP_Query([ 
 
    'posts_per_page' => 14, 
 
    'paged' => get_query_var('paged', 1) 
 
]); 
 

 
if ($the_query->have_posts()) { ?> 
 
    <div id="ajax"> 
 
    <?php 
 
    $i = 0; 
 
    while ($the_query->have_posts()) { $the_query->the_post(); 
 

 
     if ($i % 7 === 0) { // Large post: on the first iteration and every 7th post after... ?> 
 
     <article <?php post_class('col-sm-12 col-md-12'); ?>> 
 
      <div class="large-front-container"> 
 
<?php the_post_thumbnail('full', array('class' => 'large-front-thumbnail')); ?> 
 
       </div> 
 
       <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
      <p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
      <div class="front-page-post-info"> 
 
      <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
<?php get_template_part('front-shop-the-post'); ?> 
 
           <?php get_template_part('share-buttons'); ?> 
 
       <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
      </div> 
 
      </article> 
 
<?php 
 

 
     } else { // Small posts ?> 
 
      <article <?php post_class('col-md-4'); ?>> 
 
       <?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?> 
 
       <h2><a class="front-page-post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
 
<p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p> 
 
      <div class="front-page-post-info"> 
 
      <a class="moretext" href="<?php the_permalink(); ?>">Read more</a> 
 
<?php get_template_part('front-shop-the-post'); ?> 
 
           <?php get_template_part('share-buttons'); ?> 
 
       <div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div> 
 
      </div> 
 
      </article> 
 
      <?php 
 
     } 
 
     $i++; 
 
    }?> 
 
    </div> 
 
    <?php if(get_query_var('paged') < $the_query->max_num_pages) { 
 
     load_more_button(); 
 
    } 
 
} 
 
elseif (!get_query_var('paged') || get_query_var('paged') == '1') { 
 
    echo '<p>Sorry, no posts matched your criteria.</p>'; 
 
} 
 
wp_reset_postdata(); 
 
get_footer();

ответ

2

Убедитесь, что вы вложенности столбцы в строки.

Например это:

<div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
</div> 
<div class="row"> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
    <div class="col-md-4"></div> 
</div> 

Вместо этого:

<div class="col-md-4"></div> 
<div class="col-md-4"></div> 
<div class="col-md-4"></div> 
<div class="col-md-4"></div> 
<div class="col-md-4"></div> 
<div class="col-md-4"></div> 
+0

Как бы это сделать, если col-md-4 находится в цикле? Как видно выше, на моем front-page.php – user6738171

+0

Вы можете использовать модуль.Что-то вроде if ($ i% 3 === 0) {// создаем div с строкой} else {// просто создаем div с помощью столбцов} – user2263572

+0

Есть ли вероятность, что вы захотите помочь мне отредактировать мой php-файл? У меня была некоторая помощь в написании этого, и я действительно не знаю, как добавить это в настоящее время. Я был бы очень признателен! – user6738171

2

Это происходит из-за float: left свойства применяется к бутстрапу столбцов, которые, как правило, решаемым с использованием только 12 столбцов для каждой строки. У Bootstrap есть свои собственные классы, чтобы справиться с этим: Responsive Column Resets, но так как вы создаете их динамически, возможно, проще просто очистить float самостоятельно с помощью CSS. Также см MDN: Clear

Рабочий пример:

div.thumbnail { 
 
    background: #9CCC65; 
 
} 
 
@media (min-width: 992px) { 
 
    .item:nth-child(3n+1) { 
 
    clear: left; 
 
    } 
 
    div.thumbnail { 
 
    background: #1976D2; 
 
    } 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=1" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=2" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=3" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=4" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=5" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske 
 
      enkelt fyldtekst.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=6" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=7" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=8" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typ ografiindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typograf iindustrien.Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografi industrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=9" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=10" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typograf iindustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiind ustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og typogr afiindustr ien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=11" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typ ografiind ustrien. Lorem Ipsum er ganske enkelt fyldtekst fra print- og.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-md-4 col-xs-12 item"> 
 
     <div class="thumbnail"> 
 
     <img src="http://placehold.it/750x550/212121/FAFAFA?text=12" alt="..."> 
 
     <div class="caption"> 
 
      <h3>Thumbnail label</h3> 
 
      <p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

0

это связано вы помещаете все вместе, как

<div class="col-sm-6 col-xs-6" > 
 
</div> 
 
    <div class="col-sm-6 col-xs-6" > 
 
</div> 
 
<div class="col-sm-6 col-xs-6" > 
 
</div> 
 
    <div class="col-sm-6 col-xs-6" > 
 
</div>

Так что в этом случае для браузера будет сложно согласовать его, поскольку он не знает, где разместить третий, поскольку пространство заполнено.

Так что вам нужно сделать, это сказать браузеру, чтобы поместить его в следующей строке с помощью самой начальной загрузки класса

<div class="row" > 
 
<div class="col-sm-6 col-xs-6" > 
 
test 
 
    </div> 
 
     <div class="col-sm-6 col-xs-6" > 
 
     test 
 
    </div> 
 
</div> 
 
<div class="row" >  
 
    <div class="col-sm-6 col-xs-6" > 
 
    test 
 
    </div> 
 
     <div class="col-sm-6 col-xs-6" > 
 
     test 
 
    </div> 
 
    </div>

Теперь вы получите это правильный.

Смежные вопросы