Question

我正在尝试让我的列在小屏幕上占据屏幕的整个宽度，并将其内容分成两列。

以下结构在小屏幕中执行此操作，但当存在多个列时，嵌套列上的链接不起作用。

请注意：

在小屏幕上，无论有多少列，最后嵌套列上的链接始终有效。
如果列中填充了第一列的相同内容，则链接可在小屏幕上使用。

我非常感谢你的帮助。

以下是我的嵌套列：

<div class="container ">
  <!-- Example row of columns -->
  <div class="row reading-field">
    <div class="col-md-4">
      <div><h2 class="center">Recent<h2></div>
      <?php
        $postslist = get_posts('numberposts=2&category=-5');
        foreach ($postslist as $post) :
          setup_postdata($post);
      ?>
      <div class="post col-sm-6 ">
        <h3 class="center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h3>
        <p> <?php the_excerpt(); ?> <p>
      </div>
      <?php endforeach ?> 
    </div>

    <div class="col-md-4">
      <div>
        <h2 class="center">Media<h2>
      </div>
      <?php
        $postslist = get_posts('numberposts=2&offset=0&category=5');
        foreach ($postslist as $post) :
          setup_postdata($post);
      ?>
      <div class="post col-sm-6 center">
        <h3>
          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </h3>
        <p> <?php the_excerpt(); ?> <p>
      </div>
      <?php endforeach ?>
    </div>
  </div>
</div>

Answer 1

这似乎是使用Bootstrap（根据类名判断）。

您正在错误地嵌套列。您无法直接在列中嵌套列。您需要在列内的行内嵌套列：

<div class="container ">
  <!-- Example row of columns -->
  <div class="row reading-field">
    <div class="col-md-4">
      <div class="row">  <!-- ***** This was missing ***** -->
        <div><h2 class="center">Recent<h2></div>
        <?php
          $postslist = get_posts('numberposts=2&category=-5');
          foreach ($postslist as $post) :
            setup_postdata($post);
        ?>
        <div class="post col-sm-6 ">
          <h3 class="center"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h3>
          <p> <?php the_excerpt(); ?> <p>
        </div>
        <?php endforeach ?> 
      </div>    <!-- ***** and don't forget the extra closing tag ***** -->
    </div>
  </div>
</div>

Bootstrap的嵌套列上的链接在小屏幕上不起作用

1 个答案: