三12列電網側使用Twitter的引導

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

記住了較好的效果，可以實現通過使用旋轉木馬樣式表。

查看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; } 
}