-1

I'm a trying to understand how i can make the grid correct for my needs, but i broken my mind. Sorry for my english - just look at the screenshots.

>What I'm getting!<

>What I need!<

Daniil Maksimkin
  • 27
  • 1
  • 6
  • Could you post the code you've tried? – Jeremy W Apr 15 '16 at 20:29
  • Yes, of course. This is simple version of my grid - [link](https://jsfiddle.net/kindsage/7omn0hpf/) – Daniil Maksimkin Apr 15 '16 at 20:50
  • It's hard to tell from your question, but I'm assuming you want to ensure that all columns in a row stay the same height. If so, check out the answers to this question: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Sean Apr 15 '16 at 20:57
  • @sean I found this solution, but now i need to add block Sidebar under LOGO div: https://jsfiddle.net/kindsage/e7L6Lc1n/ – Daniil Maksimkin Apr 15 '16 at 21:23

1 Answers1

0

Its quite simple, all what you need is to ensure that logo wrapper will be big enough. You can also use div with .clearfix class or enforce height via css. Here is working example

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>
Ganga
  • 787
  • 1
  • 9
  • 27