css - 平板电脑上的 Bootstrap 3 网格布局问题

Question

我的新网站/services-page ( kenpils.se ) 上的 Bootstrap 网格系统有问题。

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

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

希望得到一些建议。

Answer 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>

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