三个12列并排使用twitter bootstrap

Question

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

每个部分宽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; }

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

检查demo (jsfiddle)，看一个可能的应用程序切换视图。

---

这是响应版本on 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; }
}