他のグリッド要素を押し下げた縦の列//ブートストラップ3

-1

私は自分のニーズに合わせてグリッドを修正する方法を理解しようとしていますが、私は気が狂っています。私の英語は申し訳ありません - スクリーンショットを見てください。他のグリッド要素を押し下げた縦の列//ブートストラップ3

2016-04-15 Daniil Maksimkin

働いていますか？ –

はい、もちろんです。これは私のグリッドの簡単なバージョンです - [リンク]（https://jsfiddle.net/kindsage/7omn0hpf/） –

あなたの質問から言うのは難しいですが、私はあなたが行のすべての列が同じ高さ。もしそうなら、この質問への答えをチェックしてください：http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – sean

その非常に簡単、あなたが必要なものすべては、ロゴラッパーは十分な大きさになるようにすることです。 .clearfixクラスのdivを使用することも、CSSを使用して高さを適用することもできます。ここではあなたが試したコードを投稿できる例

http://codepen.io/anon/pen/MyGKEL

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

    <style> 
     #logo img { 
      width: 100%; 
      height: auto; 
     } 

     #sidebar { 
      border: 1px solid black; 
      clear: both; 
      float: left; 
     } 

     #logo { 
      padding: 10px 0 
     } 

    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-2" id="logo"> 

       <img src="http://dummyimage.com/200x400" width="100%" /> 
      </div> 

      <div class="col-md-2 bullet"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-2 bullet"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-2 bullet"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-4" id="phone"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

      <div class="col-md-10" id="nav"> 

      <nav class="navbar navbar-default navbar-static-top"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     </ul> 
</nav> 


      <div class="col-md-9"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo aLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut 
     </div> 
      </div> 

      <div class="col-md-2" id="sidebar"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at laoreet nisl, vel consequat purus. Aenean ligula arcu, viverra ut leo a 
      </div> 

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

出典

2016-04-15 21:40:27 Ganga

ありがとうございます。試してみます！あなたはこのことについてどう思いますか？ https://jsfiddle.net/kindsage/e7L6Lc1n/サイドバーをLOGO divの下に追加する方法は？ –

ロゴラッパーの下で固定高さとサイドバーでどのように動作しているかをチェックできるように、コードを更新しました。 – Ganga

私は参照してください。これは主な問題です - ロゴは固定されていませんheigh –

他のグリッド要素を押し下げた縦の列//ブートストラップ3

答えて

関連する問題