平板电脑上的 Bootstrap 3 网格布局问题答案

【问题标题】：Bootstrap 3 Grid Layout Issue on Tablet平板电脑上的 Bootstrap 3 网格布局问题
【发布时间】：2014-03-06 19:52:34
【问题描述】：

我的新网站 /services-page (kenpils.se.

我更喜欢 3 行 2 列，而不是使列中的文本在平板电脑上更易读。现在，由于每列左侧的图标，列将变窄。

据我了解，每一行都是一个 div，这使得很难在“编辑栏”旁边的“商业栏”上滑动。两行之间还有一个divide30-class。

不胜感激。

【问题讨论】：

标签： css twitter-bootstrap grid responsive-design

【解决方案1】：

我发现最有效的解决方案是在平板电脑布局中复制您的内容。然后使用visible-* (documented here) 类属性隐藏特定内容并使特定屏幕分辨率可见。您需要将 visible-* 类属性添加到您的 <div class="row"> 并将您的 col-sm-4 更改为 col-md-4 见下文：

<div class="row visible-lg visible-md">
    <div class="col-md-4">
      <!-- Your Content 1-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 2-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 3-->
    </div>
</div>
<div class="row visible-lg visible-md">
    <div class="col-md-4">
      <!-- Your Content 4-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 5-->
    </div>
    <div class="col-md-4">
      <!-- Your Content 6-->
    </div>
</div>

然后在您的代码中添加一个部分，复制信息并将其隐藏在更大的屏幕分辨率上。见下文：

<div class="row visible-sm visible-xs">
    <div class="col-sm-6">
      <!-- Your Content 1-->
    </div>
    <div class="col-sm-6">
      <!-- Your Content 2-->
    </div>
</div>
<div class="row visible-sm visible-xs">
    <div class="col-sm-6">
      <!-- Your Content 3-->
    </div>
    <div class="col-sm-6">
      <!-- Your Content 4-->
    </div>
</div>
<div class="row visible-sm visible-xs">
    <div class="col-sm-6">
      <!-- Your Content 5-->
    </div>
    <div class="col-sm-6">
      <!-- Your Content 6-->
    </div>
</div>

这将提供您想要的格式。希望这会有所帮助。

【讨论】：

欢迎您！当我做一个网站时，它难倒了我几天。然后当我弄清楚时，我想“多么简单”。

【解决方案2】：

注意：以下解决方案不会根据您的需要改变布局。它提供了另一种解决方案！

<div class="col-services">
    <div class="row">
      <div class="col-sm-4></div>
      <div class="col-sm-4></div>
      <div class="col-sm-4></div>
    </div>
    </div>

这意味着直到宽度减小到平板区域以下才会发生中断！

col-sm-4 -> 在 tablet-zone 宽度后中断 col-md-4 -> 在正常桌面宽度后中断

替换为

<div class="col-services">
    <div class="row">
      <div class="col-md-4></div>
      <div class="col-md-4></div>
      <div class="col-md-4></div>
    </div>
    </div>

这可以确保中断发生在平板电脑级别！

【讨论】：