Question

I am using bootstrap in a fairly straightforward way, and I have a color specified in my row divs, e.g. which colors the entire row with the danger color, but on the desktop, I am only populating about 6 col-md's worth of data, and the extra color extending past where the actual data is displayed, looks funny.

On mobiles its fine, because the actual data is taking up the full row.

So, I want to be able to apply the background color to only col-md-8 of my rows when the web page is displayed on a desktop.

I tried adding the background to the individual cells, but since each of the cells is not a uniform height that didn't work either.

I tried specifying the row as being only col-md-8, but then that affects the size of all the other columns.

Do I just have to accept that I will have to change the md column sizes to take into account that they are now in a col-md-8 row?

Is there an easy to accomplish what I want?

Here is a sample of the code:

<div class="container">
<div class="row bg-danger">
<div class="col-md-3">.col-md-1</div>
<div class="col-md-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>

There are only 7 columns of data, but the danger background is on the whole row.

Answer 1

Ah, now I see what you are after. Just take the target row and make it display:table; then you can get the equal height columns with display:table-cell;

jsFiddle here

.row {
    display: table;
}
.row > div {
    float: none;
    display: table-cell;
}

Note: You can put this inside a media query if you only want the effect to happen at a certain screen size. (see this fiddle)

Answer 2

You could use your own CSS classes, to accomplish what you need.

Also, you could add the col-lg-6 class to the row.

Post your HTML code, otherwise it's really hard to help

Bootstrap 3 - background color for row, but not the whole row

2 个答案: