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

Posted 2023-03-06

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

【英文标题】：how break 1row into 2row at tablet view (width=767px) in bootstrap

【发布时间】：2016-09-17 02:35:16

【问题描述】：

我正在使用 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>'; 
 ?>

【问题讨论】：

你试过空手道砍它吗，我通常是这样做的。？说真的，你必须有条件地输出内容块，我认为 clearfix 和 mod 会这样做吗？

在 767px 宽度上，每行显示两个帖子而不是 1.. 我没有更多关于 php 的知识。请修复它

【参考方案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>

【讨论】：

查看更新的答案，请提供生成的 html 而不是后端的 html