html - Bootstrap - 行跨越列但保持响应

Question

我正在尝试创建一个基于 Bootstrap 的时间表，我希望它能够跨设备响应，但这比我想象的要难一些。

在较大的设备上，布局应如下所示，具有 3 个并行 session ，但小时槽在各列中彼此对齐:

这将不同于列位于彼此下方并且忽略水平对齐的移动 View :

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

更大的问题是每个单元格的内容可能会有很大差异。

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>

已更新以容纳白色方 block 。在大型显示器中，您可以看到我刚刚使用 CSS 将空白 block 设为白色，而当您在移动设备中查看时，这些 block 是隐藏的。 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>