四列布局引導

Question

我給出的jsfiddle即提出以下：

四列布局：使用Bootstrap類，從堆放到4列布局

HTML編輯這些div：

<div class="a"></div> 
<div class="b"></div> 
<div class="c"></div> 
<div class="d"></div> 
<div class="c"></div> 
<div class="a"></div> 
<div class="d"></div> 
<div class="b"></div> 

CSS：

div{ 
    height: 50px; 
    min-width: 50px; 
} 
div.a{ 
    background: #00FF00; 
} 
div.b{ 
    background: #1234FF; 
} 
div.c{ 
    background: #FbbF00; 
} 
div.d{ 
    background: #FF3344; 
} 

對於我的答案，我做了以下內容：

HTML：

<div class="row-fluid"> 
    <div class="span 3"> 
    <div class="a"></div> 
    <div class="b"></div> 
    </div> 
    <div class="span 3"> 
    <div class="c"></div> 
    <div class="d"></div> 
    </div> 
    <div class="span 3"> 
    <div class="c"></div> 
    <div class="a"></div> 
    </div> 
    <div class="span 3"> 
    <div class="d"></div> 
    <div class="b"></div> 
    </div> 

CSS：

div{ 
    height: 50px; 
    min-width: 50px; 
    display: inline-block; 
    } 
    div.a{ 
    background: #00FF00; 
    } 
    div.b{ 
    background: #1234FF; 
    } 
    div.c{ 
    background: #FbbF00; 
    } 
    div.d{ 
    background: #FF3344; 
    } 

但有人告訴我，我錯了，沒有解釋。有誰知道如何使用自舉上面的代碼實現四分疊列？

Answer 1

在這裏，你去與解決方案https://jsfiddle.net/yczxm9px/1/

.div{ 
 
    height: 50px; 
 
    } 
 
    div.a{ 
 
    background: #00FF00; 
 
    } 
 
    div.b{ 
 
    background: #1234FF; 
 
    } 
 
    div.c{ 
 
    background: #FbbF00; 
 
    } 
 
    div.d{ 
 
    background: #FF3344; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div a"> 
 
    
 
    </div> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div b"> 
 
    
 
    </div> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div c"> 
 
    
 
    </div> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 div d"> 
 
    
 
    </div> 
 
    </div> 
 
</div>

所有的類都是引導類。對於額外的小屏幕

• XS
• SM爲小屏幕
• 的md爲中等屏幕
• LG大屏幕。