Question

我正在使用bootstrap创建wordpress主题。

我有一个3 col的文件，每行显示4个帖子，它看起来很适合笔记本电脑查看。

问题发生在767px width。它显示每行一个帖子意味着一个帖子使用一行而4个帖子使用4个。

无论如何在引导程序中，平板电脑视图4post显示2行而不是4行??? @media查询没有处理这个

目前的767px - ＆gt; 4个帖子= 4行

767px需要

- ＆gt; 4个帖子= 2行

content.php

  <div <?php post_class( 'custom-col col-lg-3 col-xs-3 col-sm-3 col-md-3' ); ?> id="post-<?php the_ID(); ?>">

         <div class="single-post">     
          div class="post-thumb" > 
               <a href="<?php echo esc_url( post_permalink() ); ?>">
               <?php the_post_thumbnail  ( 'large', array(
                  'class' => 'img-responsive' 
                ) ); ?> </a>
         </div>            
        <div class="post-title">
             <h3><a href="<?php echo esc_url( post_permalink() ); ?>">
              <?php the_title(); ?></a></h3>
        </div>
        </div>
        </div>

 <?php $item_number++;
 if( $item_number % 4 == 0 ) echo '<div class="clearfix visible-lg-block"></div>';
 if( $item_number % 1 == 0 ) echo '<div class="clearfix visible-xs-block"></div>';
 if( $item_number % 2 == 0 ) echo '<div class="clearfix visible-sm-block"></div>';
 if( $item_number % 4 == 0 ) echo '<div class="clearfix visible-md-block"></div>'; 
 ?>

Answer 1

您需要将此col-xs-3更改为此col-xs-6

请参阅有关网格系统的Bootstrap docs

下面是一个基本的演示

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Columns start at 50% wide on mobile and bump up to 25% wide on desktop -->
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
    <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
    <div class="col-xs-6 col-md-3">.col-xs-6 .col-md-3</div>
  </div>
</div>

如何在bootstrap中将1row打入2row平板电脑视图（宽度= 767px）

1 个答案: