グリッドとリストビューのCSSスイッチ

Question

ファイルのドロップボックス表示のようなグリッドまたはリストビューを作成しようとしています。 誰かがフォローしているCSSのサンプルを持っていますか？どんなヘルプやリンクも私が始めるには素晴らしいものです。 または彼らは単にリストビュー ためclass="rows" と<div class="row">を作り、<div class="row"> <div class="col-md-1"> </div></div>

Answer 1

https://www.w3schools.com/html/html_lists.asp
それだけで、これを使用していないされていますか？あなたはそれをどのようにしてCSSでスタイリングできますか？

Answer 2

グリッドシステムのブートストラップdocumentationを見てください。

ここにレイアウトの例を示します。

.col-xs-4 { 
 
background-color:grey; 
 
border:1px solid white; 
 
text-align:center; 
 
color:white; 
 
} 
 
.col-xs-6 { 
 
background-color:blue; 
 
border:1px solid white; 
 
text-align:center; 
 
color:white; 
 
} 
 
.col-xs-12 { 
 
background-color:red; 
 
border:1px solid white; 
 
text-align:center; 
 
color:white; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-4">.col-xs-4</div> 
 
    <div class="col-xs-4">.col-xs-4</div> 
 
    <div class="col-xs-4">.col-xs-4</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-6">.col-xs-6</div> 
 
    <div class="col-xs-6">.col-xs-6</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-xs-12">.col-xs-12</div> 
 
</div>