html - 三个 12 列网格并排使用 twitter bootstrap

Question

我正在使用引导程序创建一个个人网站，我想创建这个特定的布局：

每个部分都是 940 像素宽，有 12 列，所以当屏幕查看 3 个部分中的 1 个时，其他 2 个被隐藏，我该如何执行？

非常感谢您的帮助！

Answer 1

给定默认的 12 列引导网格，使用以下标记：

<div class="container supercontainer">
    <div class="supercontainer-inner clearfix view-1">
        <div class="container"><div class="row"><div class="span12"><p>Grid 1</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 2</p></div></div></div>
        <div class="container"><div class="row"><div class="span12"><p>Grid 3</p></div></div></div>
    </div>
</div>

这个CSS：

.supercontainer {
    overflow-x: hidden;
}
.supercontainer-inner {
    width: 2820px;
  -webkit-transition: margin-left 0.35s ease;
     -moz-transition: margin-left 0.35s ease;
       -o-transition: margin-left 0.35s ease;
          transition: margin-left 0.35s ease;
}
.supercontainer-inner > .container {
    float: left!important;
}


.supercontainer-inner.view-1 { margin-left: 0; }
.supercontainer-inner.view-2 { margin-left: -940px; }
.supercontainer-inner.view-3 { margin-left: -1880px; }

请记住，使用轮播样式表可以获得更好的效果。

检查演示（jsfiddle），查看一个可能的应用程序来切换视图。

---

这是jsfiddle 上的响应式版本。

但这需要对 LESS 脚本进行一些清理，并带有一个用于查看数量的变量（并且可能只是扩展基本网格..哼哼）。

@media (min-width: 1200px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -1170px; }
    .supercontainer-inner.view-3 { margin-left: -2340px; }
    .supercontainer-inner {
        width: 3510px;
    }
}
@media (max-width: 979px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -724px; }
    .supercontainer-inner.view-3 { margin-left: -1448px; }
    .supercontainer-inner {
        width: 2172px;
    }
}
@media (max-width: 767px) {
    .supercontainer-inner.view-1 { margin-left: 0; }
    .supercontainer-inner.view-2 { margin-left: -100%; }
    .supercontainer-inner.view-3 { margin-left: -200%; }
    .supercontainer-inner {
        width: 300%;
    }
    .supercontainer-inner >.container { width: 33.33%!important; }
}