Question

我需要连续三列col3大小。我还需要它们至少与col2的大小分开。也就是说，第一列和第三列必须分别设置在容器的左侧和右侧，而中间的一列在两侧具有相等的边距。

如何在Bootstrap最新版本中实现这一目标？

Answer 1

您可以使用（有或没有.container）：

<div class="container">
  <div class="col-left col-xs-12 col-md-3">LEFT</div>
  <div class="col-center col-xs-12 col-md-3">CENTER</div>
  <div class="col-right col-xs-12 col-md-3">RIGHT</div>
</div>

使用自定义CSS使其正常工作：

@media (min-width: 992px) {
  .col-left {
    float: left;
  }
  .col-center {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -12.5%;
  }
  .col-right {
    float: right;
  }
}

Bootply

Answer 2

标准Bootstrap构建是12列设置。使用3 col-XX-3和col-XX-offset-2，最多可添加13列（3 + 2 + 3 + 2 + 3 = 13）。您需要创建一个包含13列的自定义引导程序构建。

要获得所需的外观，请使用col-XX-offset-*，其中XX是屏幕尺寸（lg，md，sm，xs），*是偏移量。 col-XX-offset-*将列*向右偏移。

因此，为了获得您想要的外观，您的代码将如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-3" style="background: #333; height:250px;"></div>
    <div class="col-md-3 col-md-offset-2" style="background: #666; height:250px;"></div>
    <div class="col-md-3 col-md-offset-2" style="background: #999; height:250px;"></div>  
  </div>
</div>

除非你的列和偏移量加起来为12，否则这对你不起作用。要进行自定义Bootstrap 13列构建，请按照以下步骤操作：

转到此处http://getbootstrap.com/customize/#grid-system
将@grid-columns更改为13
滚动到页面底部，然后点击“编译并下载”
用新下载的文件替换旧的.css和.js。

我希望这会有所帮助。这是获得所需外观并确保内容列之间始终存在2列偏移的最佳方法。

注意：您可以从style div中删除col-md-3属性。它们就在那里，所以可以看到列。

在Bootstrap中安排列

2 个答案: