0

更新
我有两个带有 TwitterBootstrap 的列span7，span5如下所示：

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

在我 在平板电脑和移动屏幕（767px 及以下）上span5的定义列表中有内容折叠成这样：<dl>

|     span7     |   
|     span5     |

这使得折叠span5起来非常高和薄，因此我需要将信息span5分成两列，如下所示：

|     span7     |   
| span5 | span5 |

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

4

1 回答 1

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：如何不将列缩放到 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进行测试）

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

于 2013-10-07T13:58:20.123 回答