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

Question

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

htmlcsstwitter-bootstrapresponsive-design

3

我正在尝试创建一个基于Bootstrap的时间表，希望它可以在各种设备上响应式显示，但比我想象的要困难一些。

在较大的设备上，布局应该如下，有3个并行会话，但每列的小时槽应该对齐：

这将与移动视图不同，在移动视图中，列会相互排列，并且水平对齐会被忽略：

我曾试图在每一列中使用表格，但很快就意识到这个想法是有缺陷的。其他尝试使列具有相同高度的方法也失败了。

更大的问题是，每个单元格的内容可能会巨大地变化。

- Blease

您需要能够在每个单元格中显示完整的内容吗？通过固定高度，您可以通过将每天嵌套在.col-lg-4内来实现堆叠，这样它们将堆叠在小于lg视口的尺寸上。 - David

3

能否与我们分享您的代码？ - L777

我认为你将遇到的第一个实际问题是Bootstrap的网格既不能被5整除也不能被7整除（假设每周有num个日历天），除非你访问自定义构建页面 - http://getbootstrap.com/customize/。 - ThisClark

@freestock.tk 我没有有用的代码可以提供，它们都是彻头彻尾的死胡同。我只包含了最初的两个简单想法。 - Blease

@ThisClark 列数可能不同，我知道我需要设置限制。 - Blease

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hcgriggs · Accepted Answer

你尝试过嵌套列吗？你可以放置一个三列的单行，然后在这些列内嵌其他div。这是一个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将空块变为白色，在移动设备上，这些块被隐藏。这里是更新的 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>