Question

我的新网站/服务页面kenpils.se上的Bootstrap网格系统有问题。

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

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

会感激一些建议。

Answer 1

注意：以下解决方案并未根据您的要求更改所有布局。它提供了另一种解决方案！

<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 - ＆gt;片剂区域宽度后打破 col-md-4 - ＆gt;正常桌面宽度后中断

将其替换为

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

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

Answer 2

我发现最好的解决方案是在平板电脑布局中复制您的内容。然后使用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>

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

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

2 个答案: