引导网格未正确对齐

时间：2017-02-03 20:18:03

标签： html twitter-bootstrap twitter-bootstrap-3 grid alignment

我在首页上使用引导网格系统将我的帖子显示为第一行中的1个帖子，第二行中的3个帖子，第三行中的3个帖子等等。我的帖子有问题我的帖子没有对齐col-md-4行。但是，这个问题出现的唯一时间是我有一个比一行更长的标题（下面的例子）。有谁知道我怎么解决这个问题？

应该怎么看...... enter image description here

当我有一个帖子有一个标题（或摘录）的帖子时，看起来怎么样...... enter image description here

如您所见，示例帖子12一直向右移动（它应该在左侧）示例帖子13和14在下面移动。我不知道如何解决这个问题，我真的很感激任何帮助！

我的front-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();

3 个答案:

答案 0 :(得分：3)

确保将行嵌套在行中。

例如：

<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>

答案 1 :(得分：2)

这是由于应用于Bootstrap列的float: left属性，通常通过每行仅使用12列来解决。 Bootstrap确实拥有它自己的类来处理这个问题：Responsive Column Resets但是由于你动态地创建它们，所以用CSS自己清除浮动可能更简单。另请参阅MDN: Clear

工作示例：

＆＃13;
＆＃13; 
div.thumbnail {
  background: #9CCC65;
}
@media (min-width: 992px) {
  .item:nth-child(3n+1) {
    clear: left;
  }
  div.thumbnail {
    background: #1976D2;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这是因为你把所有这些放在一起像

＆＃13;
＆＃13; 
 <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>
＆＃13;
＆＃13;
＆＃13;

因此，在这种情况下，浏览器难以正确对齐，因为当空间被填满时，它不知道将第三个放置在哪里。

所以你需要做的是告诉浏览器使用bootstrap类本身将它放在下一行

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

现在你会得到它。

相关问题
最新问题