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

Posted 2023-03-06

【中文标题】Bootstrap 嵌套列中的链接在小屏幕上不起作用

【英文标题】：links on Bootstrap's nested columns not working when on small screen

【发布时间】：2014-11-13 09:33:59

【问题描述】：

我试图让我的列在小屏幕中占据整个屏幕的宽度，并将它们的内容分成两列。

下面的结构在小屏幕上可以做到这一点，但是当有多个列时，嵌套列上的链接不起作用。

注意：

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

非常感谢您的帮助。

这是我的嵌套列：

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

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

【讨论】：

没有问题！你能接受答案并投票吗？