Bootstrap 3 responsive columns of varying heights

问题

EDIT The pricing tables' content will all be dynamically generated, I cannot predict their height, I'm simply using the 400px case for the diagram. So I can't set a static height to each column as a fix.

I have 8 pricing tables They are all similar heights close to 400px, with the largest (red square) being 430px and the smallest at a height of 390px.

Responsive class for columns: class="col-lg-3 col-md-4 col-sm-6"

HTML layout:

<div class="row">
    <% columns.each do |column| %>
        <div class="col-lg-3 col-md-4 col-sm-6">
            CONTENT
        </div>
    <% end %>   
</div>

How do I prevent columns being pushed off into "new row", i.e. All the columns are contained in the same div.row tag so they can act responsively. But in the second set of columns, the first two "slots" are skipped, the third row (not shown) begins like normal however.

IMPORTANT THAT THEY'RE ALL IN THE SAME .row OBJECT So that responsive aspect works and columns collapse down.

Diagram of problem:

What I want is something more like this:

回答1:

after 3 cols for md, 2 for sm, 4 for lg, you can add a div with style "clear:both" using mod (%).

回答2:

You can be clever with media queries, and clear the first item in the next row depending on the resolution size.

.regular {
    background: gray;
    height: 350px;
    margin-bottom: 30px;
}
.tall {
    background: red;
    height: 500px;
    margin-bottom: 30px;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .fix-row > div:nth-child(3) {
        clear: left;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: left;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: none;
    }
    .fix-row > div:nth-child(5) {
        clear: left;
    }
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row fix-row">
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="tall">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="regular">
                CONTENT
            </div>
        </div>
</div>

JSFiddle Example: http://jsfiddle.net/tkL8edwj/

How it Works:

I'm using media queries to determine when the last row item is, then using the CSS pseudo selector nth-child(n) to specify the last item in the row.

Since you are using col-lg-3, col-md-4, and col-md-6 for your grid item classes, I can know the first item in the next row based on the default Bootstap break points.

col-lg-4 breaks at a certain point (1200px), and because you are using 4 I know there are 3 items in the row (12/4 = 3). That means I can target every 5th div in the row and get the first item of each row, and then use clear: left to ensure it clears the float of the divs before it.

Same thing for the rest of the break-points. I'll notice I'm also resetting the clear to clear: none when necessary so the one's previously targets don't break at the wrong resolutions.

回答3:

Another way is to use CSS column-width like this..

.row {
 -moz-column-width: 20em;
 -webkit-column-width: 20em;
 -moz-column-gap: 10px;
 -webkit-column-gap:10px; 
}

.row > .col-lg-3 {
 display: inline-block;
 padding: 0;
 margin: 10px;
 width: 100%; 
 float:none;
}

Demo: http://bootply.com/jFdfbBgkv6

回答4:

I know exactly what you're talking about as I have ran into the same issue. I don't know ruby, but the answer is simple:

Use a for loop with a counter i
When i % 4 == 0, print: <%= </div><div class="row"> %> after your <div class='col'>.

This way, every 4 entries, the class='row' will stop and create a new one. and the last row will not affect the next row and the class='col' will not be affected. This also works when screen size is lowered.

来源：https://stackoverflow.com/questions/28119377/bootstrap-3-responsive-columns-of-varying-heights

标签

html

css

twitter-bootstrap-3

multiple-columns