如何在引导程序中将平板电脑视图（宽度 = 767px）的 1 行分成 2 行

Question

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

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

问题出在767px width。它显示每行一个帖子意味着一个帖子使用一排，而 4post 使用 4 行。

在引导程序中是否存在在平板电脑视图 4post 显示为 2 行而不是 4 行？ @media 查询不处理这个

当前为 767 像素--> 4 个帖子 = 4 行

需要 767 像素--> 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>