1

I found a really tricky problem for bootstrap div in responsive design.

my code is below:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Grid System</title>
<link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap- theme.min.css">
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
<style type="text/css">
    p{
    padding: 50px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    background: #f2f2f2;
}
</style>
</head>
<body>
<!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
    <div class="row">
        <div class="col-md-2"><p>Box 1 test</p></div>
        <div class="col-md-2"><p>Box 2</p></div>
        <div class="col-md-2"><p>Box 3</p></div>
        <div class="col-md-2"><p>Box 4</p></div>
        <div class="col-md-2"><p>Box 5</p></div>
        <div class="col-md-2"><p>Box 6</p></div>
        <div class="col-md-2"><p>Box 7</p></div>
        <div class="col-md-2"><p>Box 8</p></div>
        <div class="col-md-2"><p>Box 9</p></div>
        <div class="col-md-2"><p>Box 10</p></div>
        <div class="col-md-2"><p>Box 11</p></div>
        <div class="col-md-2"><p>Box 12</p></div>
    </div>
</div>
</body>
</html>

If you try this code in HTML, in a medium sized screen, you will see obviously the Box 7 shows under Box 2 instead of under Box 1. that's because Box 1 have extra strings: test.

So I would like to know if there's a way to make them aligned well? like Box 7 shows under Box 1 and so on...

Thank you guys in advance.

Tiancheng Li
  • 13
  • 4

2 Answers2

0

Close the row up after box 6, then add a new row.

  <div class="container">
    <div class="row">
        <div class="col-md-2"><p>Box 1 test</p></div>
        <div class="col-md-2"><p>Box 2</p></div>
        <div class="col-md-2"><p>Box 3</p></div>
        <div class="col-md-2"><p>Box 4</p></div>
        <div class="col-md-2"><p>Box 5</p></div>
        <div class="col-md-2"><p>Box 6</p></div>
   </div>
   <div class="row">
        <div class="col-md-2"><p>Box 7</p></div>
        <div class="col-md-2"><p>Box 8</p></div>
        <div class="col-md-2"><p>Box 9</p></div>
        <div class="col-md-2"><p>Box 10</p></div>
        <div class="col-md-2"><p>Box 11</p></div>
        <div class="col-md-2"><p>Box 12</p></div>
    </div>
</div>

CODEPEN DEMO

Peter Girnus
  • 2,673
  • 1
  • 19
  • 24
  • This works too. however, in my situation, I use angularjs ng-repeat to render all results, and the text is derived from database, so I don't know where it might have a taller column, what should I do then? – Tiancheng Li Nov 07 '15 at 18:40
  • It will work, the problem is that bootstrap is a 12 col grid system, you were adding too many cols to a row. – Peter Girnus Nov 07 '15 at 18:49
  • In AngularJS, my code is like this:

    {{item.title}}

    So I think I cannot group every 6 of them in a single
    . I know with angularjs it's already a new question, but please help me if you know the answer. Thank you.
     – Tiancheng Li Nov 07 '15 at 23:34
  • I'm sorry you can mark a correct answer then ask a new one. – Peter Girnus Nov 07 '15 at 23:46
0

A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements. > From this SO Post What is clearfix?

You can use the clearfix class by applying it after the last div for the specified columns (since you want 6 col-md-2s for 12 total columns). In this case apply it after the sixth col-md-2.

See the Docs

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 1</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x250" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 2</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x550" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 3</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x650" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 4</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 5</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x550" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 6</p>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x450" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 7</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 8</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x250" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 9</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x500" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 10</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x400" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 11</p>
      </div>
    </div>
    <div class="col-md-2">
      <img src="http://placehold.it/850x350" class="img-responsive" />
      <div class="alert alert-info">
        <p>Box 12</p>
      </div>
    </div>
  </div>
</div>
vanburen
  • 21,502
  • 7
  • 28
  • 41
  • I think this is a cool way. However, in my case, the text is derived from database, and angular ng-repeat is used to render all the results. Plus, because each div is responsive, the taller columns happened only in certain window sizes. So I don't know where to add the clearfix div. How do we deal with this situation? – Tiancheng Li Nov 07 '15 at 18:36