Question

更新
我有TwitterBootstrap span7和span5的拖曳列，如下所示：

<div class="row">
<div class="span7">Column 1</div>
<div class="span5">Column 2</div>
</div>

在span5中，我在定义列表<dl>中有内容在平板电脑和移动屏幕（767px及以下）上崩溃了：

|     span7     |   
|     span5     |

这会使折叠的span5变得非常高大，因此我需要将span5中的信息拆分为两列，如下所示：

|     span7     |   
| span5 | span5 |

有任何建议如何在没有任何重大麻烦的情况下做到这一点？

Answer 1

嗯，我想你必须承认，只有你可以指定你希望如何拆分你的“span5”内容。它无法被浏览器猜到。（也许你会想要每一条线，或者在中间分开......）

因此，我们假设您的原始内容是：

<div class="row">
  <div class="span7">Span 7</div>
  <div class="span5">
    <div>Span 5-1</div>
    <div>Span 5-2</div>
  </div>
</div>

哪个

|       span7       |   
| span5-1 | span5-2 |

这篇文章应该会有所帮助：Twitter Bootstrap: how to not scale columns to single row under 767px

不幸的是，我没有比被迫写两次内容更好：

<div class="row-fluid">
  <div class="span7">Span 7</div>
  <div class="span5 hidden-phone">
    <div>Span 5-1</div>
    <div>Span 5-2</div>
  </div>
    <div class="mobile-one visible-phone">Span 5-1</div>
    <div class="mobile-two visible-phone">Span 5-2</div>
</div>

（您可以在http://bootply.com/86089）

进行测试

如果我能找到更好的东西，我会发布另一个解决方案......

折叠跨度分为两列

1 个答案: