Twitter的引導3.x語義移動網格

在閱讀新的（未完成的）Bootstrap 3 docs我想知道如何創建語義移動網格。Twitter的引導3.x語義移動網格

總之。如何將此轉換：

<div class="row"> 
    <div class="col col-lg-6 col-sm-6">6</div> 
    <div class="col col-lg-6 col-sm-6">6</div> 
</div>

爲了這一點，並保留了小型移動格：

<div class="wrapper"> 
    <div class="left">6</div> 
    <div class="right">6</div> 
</div>

少

.wrapper { .make-row(); } 
.left { .make-column(6); // this creates only large grid } 
.right { .make-column(6); }

來源

2013-06-25 howtodothis

如果我明白你的問題很好，我認爲你應該使用：

~~<div class="row"> <div class="col-span-6 col-small-span-6″>6</div> <div class="col-span-6 col-small-span-6″>6</div> </div>~~

~~哪裏 col-span-6是你的大電網和 col-small-span-6爲小網格類。如果你離開 col-small-span-6你的div將堆積。小網格不使用 col-span-*類。~~

參見：http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

從現在Twitter的引導定義了三個網格：用於手機（< 480像素）微型電網，小網格片（< 768px）和Destkops的大中型電網（> 768px）。這些網格的行類前綴是「.col-」，「.col-sm-」和「.col-lg-」。中大型網格將疊加在768像素的屏幕寬度以下。小網格也不到480像素，而小網格從不堆疊。

所以，你的HTML應該是：

<div class="row"> 
    <div class="col-6 col-lg-6 col-sm-6">6</div> 
    <div class="col-6 col-lg-6 col-sm-6">6</div> 
</div>

LESS ~~最新版本： https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip不包含。使小柱的功能了。~~ 另請參閱：https://github.com/twbs/bootstrap/pull/8302 .make-column（）將爲最小寬度添加媒體查詢：@ grid-float-breakpoint，所以在小網格上，您的列將始終使用此函數堆疊。

你可以嘗試：

// Generate the small columns 
.make-small-column(@columns) { 
    position: relative; 
    float: left; 
    // Prevent columns from collapsing when empty 
    min-height: 1px; 
    // Inner gutter via padding 
    padding-left: (@grid-gutter-width/2); 
    padding-right: (@grid-gutter-width/2); 
    @max : (@grid-float-breakpoint - 1); 
    // Calculate width based on number of columns available 
    @media (max-width: @max) { 
    width: percentage((@columns/@grid-columns)); 
    } 
} 

.wrapper { .make-row(); } 
.left { .make-column(6); .make-small-column(6);} 
.right { .make-column(6); .make-small-column(6);}

UPDATE

答案以上將基於Twitter的引導3. Twitter的引導3的最終版本的候選發佈版有4個網格超小型（ xs），小（sm），中（md）和大（lg）。此外，Less代碼已根據這些網格進行更改。因此，使用由@gravy在他的回答中描述的.make- {X} -column混入：https://stackoverflow.com/a/18667955/1596547

來源

2013-06-25 21:45:11

第1部分：咆哮

我討厭使用HTML DIV類爲表示層的HTML bootstrappers！！我讚賞你正確地編程你的網站。

它讓我想起了90年代和21世紀初，當時我們都在用表格建造網站......我們是否會倒退呢？

<div class="col-6 col-lg-6 col-sm-6">6</div> 
<div class="col-6 col-lg-6 col-sm-6">6</div>

<table><tr><td>6</td><td>6</td></tr></table>

我在等待，谷歌強加給非語義標記處罰的一天。

第2部分：解決方案

總之，拉這回問題...

對於引導3，據我所知，您不能使用.make-column(6)等..按貝斯Jobsen的答案，因爲你需要指定窗口/屏幕的大小。 lg/md/sm/xs

這裏是我會怎麼做？

main.less

@import 'bootstrap.less'; 

.wrapper { 
    .container; 
    .make-row(); 
    .clearfix(); 
} 

.content-main { // Change these for each window size 
    .make-lg-column(6); 
    .make-md-column(6); 
    .make-sm-column(6); 
    .make-xs-column(6); 
} 
.content-sidebar { // change these for each window size 
    .make-lg-column(6); 
    .make-md-column(6); 
    .make-sm-column(6); 
    .make-xs-column(6); 
}

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="UTF-8"> 
    <style rel="stylesheet/less" src="less/main.less" /> 
    <script src="js/less-1.4.1.min.js" type="text/javascript"></script> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 

    <script src="assets/js/html5shiv.js"></script> 
    <script src="assets/js/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <div class="wrapper"> 
     <div class="content-main"> 
      <div class="page-title"> 
       <!-- Page Title Stuff --> 
      </div> 
      <div class="page-content"> 
       <!-- Page Content Stuff --> 
      </div> 
     </div> 
     <div class="content-sidebar"><!-- Page Footer Stuff --></div> 
    </div> 
</body>

來源

2013-09-06 23:17:51 Gravy

這個答案使用由引導，這是很好提供的混入。雖然因爲它們具有不同的邊距（容器的自動邊距，以及行的一半的邊距大小的負邊距），我會謹慎的將'.container'和'.make-row'放在同一個元素上。因此，您的行應放置在任何容器內。 – rmarscher

Twitter的引導3.x語義移動網格

回答

相關問題