ブートストラップ付きマルチカラムレイアウト

-2

ブートストラップで次のようなマルチカラムレイアウトを実現できますか？ブートストラップ付きマルチカラムレイアウト

...私は次のようなものが原因行/列レイアウト機能システムに容易に可能になります知っているが、私は意図的にその可能かどうかを確認するために上記の先進例を含め

2017-03-26 Robin Rodricks

高さは図のように制限する必要がありますか？それは固定値ですか？ –

あなたは間違いなくブートストラップを使って達成することができます。この種のデザインではdivの適切なネストが必要です。チェックアウトは以下exmple--

ワーキングスニペット

.border { 
 
    border: 2px solid; 
 
    border-color: blue; 
 
    margin-top: 5px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 

 
<body> 
 
<div class="container"> 
 
<div class="row"> 
 

 
<div class="col-lg-2"> 
 
<div class="border col-lg-12"> 
 
section A<br> 
 
section A<br> 
 
section A<br> 
 
section A<br> 
 
section A<br> 
 
section A<br> 
 
section A<br> 
 
section A<br> 
 

 
</div> 
 
<div class="border col-lg-12"> 
 
section B<br> 
 
section B<br> 
 
section B<br> 
 
section B<br> 
 

 
</div> 
 
</div> 
 

 
<div class="col-lg-8"> 
 
<div class="border col-lg-7"> 
 
section C<br> 
 
section C<br> 
 
section C<br> 
 

 
</div> 
 
<div class="border col-lg-5"> 
 
section D<br> 
 
section D<br> 
 
section D<br> 
 
</div> 
 
<div class="border col-lg-5"> 
 
section E<br> 
 
section E<br> 
 
section E<br> 
 
section E<br> 
 
section E<br> 
 
section E<br> 
 
</div> 
 
<div class="col-lg-7"> 
 
<div class="border col-lg-12"> 
 
section F<br> 
 
section F<br> 
 
section F<br> 
 
</div> 
 
<div class="border col-lg-12"> 
 
section G<br> 
 
section G<br> 
 
section G<br> 
 
</div> 
 
</div> 
 
<div class="border col-lg-12"> 
 
section H<br> 
 
section H<br> 
 

 
</div> 
 
</div> 
 

 

 

 
</div> 
 
</div> 
 
    
 
</body> 
 
</html>

注：私はcol-lg-*クラスを使用するので、それを見て、フルスクリーンに行くしています。

出典

2017-03-26 14:27:05 neophyte

素晴らしい！ありがとうございました！ –

JavaScriptを快適に使用できる場合は、masonryJSを使用できます。https://github.com/desandro/masonry

CSSのみを使用すると、高さi私はあなたが応答性を探していると思いますので、私はそうではないと思います。

出典

2017-03-26 13:36:51 Lucian

良いアイデアのように聞こえます。ありがとう、ありがとう。 –

固定高さの値を設定して浮動値を調整してみることはできますか？

出典

2017-03-26 13:37:52 Elias

ブートストラップ付きマルチカラムレイアウト

答えて

関連する問題