Question

我正在尝试创建一个基于引导程序的时间表，我希望它能够跨设备响应，但它比我更难。

在较大的设备上，布局应该是以下3个并行会话，但小时插槽在列之间相互对齐：

这与列位于彼此下方的移动视图不同，并且忽略水平对齐：

我确实尝试在每一栏中使用一张表，但很快意识到这个想法是有缺陷的。使柱子具有相同高度的各种其他尝试也失败了。

更大的问题是，每个细胞的内容都会发生很大变化。

Answer 1

您是否尝试过嵌套列？您可以放置一行三列，然后将其他div嵌套在这些列中。 Here's a Bootply。您可以看到列在移动设备中堆叠。这是代码，它相对简单：

<div class="container">

    <div class="row">
      <div class="col-xs-12 col-md-4">
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-left"></div>

      </div>
      <div class="col-xs-12 col-md-4">

        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid"></div>

      </div>
      <div class="col-xs-12 col-md-4">

          <div class="col-xs-12 col-top"></div>
          <div class="col-xs-12 col-right"></div>
          <div class="col-xs-12 col-right"></div>
          <div class="col-xs-12 col-right"></div>

      </div> 
    </div>


</div>

更新以容纳白色块。在大型显示器中，您可以看到我刚刚使用CSS将空块设置为白色，当您在移动设备中查看时，这些块将被隐藏。 Here's the updated Bootply，这是代码。

<div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
        <div class="col-xs-12 col-left"></div>    
      </div>
      <div class="col-xs-12 col-md-4">   
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
      </div>
      <div class="col-xs-12 col-md-4">
          <div class="col-xs-12 col-top"></div>
          <div class="col-xs-12 col-topright"></div>
          <div class="col-xs-12 col-bottomright"></div>
      </div> 
    </div>
</div>

Bootstrap - 行跨越列但保持响应

1 个答案: