Bootstrap gaps between columns

后端未结

关注

 4  1451

See: http://www.anniestasjes.nl/40/producten.html?category=tassen I use bootstrap 3 for responsive layout. I get these huge gaps between products because sometimes the produ

相关标签:

4条回答

旧巷少年郎

2021-01-16 09:24

Two simple ways to do this, that each come with their own downsides:

1) Set a fixed height of the product container: .product{height:300px}. This only works if you know a maximum # of lines your product description will ever have.

2) Put each row of products into their own .row: <div class="row"><div class="col-md-4 col-...">... This only works if you're ok not having your rows dynamic (e.g. always 3 accross) which looking at your example I think you're not.

A more dynamic way of handling this would be some javascript that reads the calculated height of the tallest .product container in a given row (not .row) and assigns that same height to it's neighbors... but this is beyond me at the moment:)

0 讨论(0)
发布评论:

提交评论
- 加载中...

小鲜肉

2021-01-16 09:26

Make sure you're using the latest version of Bootstrap (currently v3.2.0).

The newly added responsive utilities will help you to accomplish this, as described in the documentation here.

Insert this div between the "rows":

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>

Explanation:

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

So, in your case, you need to have a clearfix added for each of the lg/md breakpoints after every third element; for the sm elements after every fourth element; and for every xs element after every second element. Here's a Bootply example of how that would look.

Please note that as pointed out by @sean-ryan, you should be using the .row class instead of the old row-fluid, and you should not be wrapping the entire column in an anchor tag. I've corrected that below (and adjusted your css in the Bootply accordingly).

<div class="container">
    <div class="row products">
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Cowboysbag 'The Bag' Black</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Another Dynamite bag with a much longer title that will need to wrap</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>A hot handbag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-lg-block visible-md-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>I think I like the Green bag most</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-sm-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>I guess Tassen is Dutch for bag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>In German, bag is Tasche oder Handtasche (handbag)</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-lg-block visible-md-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>This is another handbag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Yet another cool bag</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>

        <div class="visible-sm-block visible-xs-block clearfix"></div>

        <div class="col-md-4 col-sm-3 col-xs-6 product">
            <a href="/40/128/cowboysbag-the-bag-black.html">
                <img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
                <h4>Cowboysbag 'The Bag' Black</h4>
                <div class="price">€ 129,95</div>
            </a>
        </div>
    </div> <!-- /row -->
</div> <!-- /container -->

If all of this is just too much markup for you, you can use jQuery instead to make the adjustments automatically as follows:

var row=$('.row');
$.each(row, function() {
    var maxh=0;
    $.each($(this).find('div[class^="col-"]'), function() {
        if($(this).height() > maxh)
            maxh=$(this).height();
    });
    $.each($(this).find('div[class^="col-"]'), function() {
        $(this).height(maxh);
    });
});

0 讨论(0)

时光取名叫无心

2021-01-16 09:28

Just use pull-left class for each div so they will float left automatically or

each row seprately like

<div class="row">
    <div class="col-md-2">prod1</div>
    <div class="col-md-2">prod2</div>
    <div class="col-md-2">prod3</div>
</div>
<div class="row">
    <div class="col-md-2">prod4</div>
    <div class="col-md-2">prod5</div>
    <div class="col-md-2">prod6</div>
</div>

0 讨论(0)

误落风尘

2021-01-16 09:32
Your main problem is that you are not using the grid system correctly.

Your issue is that you have one div.row that you then are placing ALL of your product <div>s in. Generally, one .row should only have a maximum of 12 columns in it per size. You can go more than that, but only if you ensure that the total for any particular size is a factor of 12, or you will end up with dangling boxes. And as stated at the beginning, 33 in one .row is definitely not the correct approach.

This is in addition to the following:
1. .row-fluid does not exist any more in Bootstrap 3. It is now just .row.
2. You shouldn't be wrapping the columns in <a> tags. If you are going to do that, wrap the contents of the columns instead.
3. Once a column is in a row, it is going to need to stay in that row. Changing the columns via .col-[SIZE]-[N] should be for changing the width of that particular container, not adding more containers to a row. In other words, going from two products per row to three to four is just not going to happen.
4. You do not need to declare .col-lg-4 if you have already declared .col-md-4. Bootstrap's grid system cascades up, meaning the last declared size applies to all larger sizes.
I would suggest you spend some time going back and familiarizing yourself with how Bootstrap's grid system works via the docs or any number of helpful answers to questions here on SO.

All that being said, there is a way for you to go from two products per row to four with a bit of nesting. See http://www.bootply.com/rymvydjpDn for a basic working example, and code is below:
```
<div class="row">
  <div class="col-xs-6">
    <div class="row">
      <div class="col-md-6">
        CONTENT...
      </div>
      <div class="col-md-6">
        CONTENT...
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="row">
      <div class="col-md-6">
        CONTENT...
      </div>
      <div class="col-md-6">
        CONTENT...
      </div>
    </div>
  </div>
</div>
```
A different way to approach the solution above, without all the nesting: http://www.bootply.com/fB84B9ovrF
```
<div class="row">
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
  <div class="col-md-3 col-xs-6">
    CONTENT...
  </div>
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...