CODEWITHSUNDEEP
csstwitter-bootstrap
codephobia
codephobia

Reputation: 1590

bootstrap flex row heights to match

Trying to make the cols in a row all match the same height with pure css, and no javascript. I have a solution that appears to work, until you start changing the number of cols in a row, or don't have a full row of cols. If you check out the bootply here: http://www.bootply.com/jZLRAiiEn7 ... you can see it is working with col-md-3 ... but if you change them to col-md-6 ... strange things happen, like a col taking 100% width. Hoping a small change in the css is all I need to fix this.

Upvotes: 2

Views: 1219

Answers (3)

Nima Marashi
Nima Marashi

Reputation: 121

Hope this helps: Each 12 columns should be wrapped in a separate row, and used media query to prevent flex classes effect on stacked columns

Check it please: http://www.bootply.com/t7KmkdKLna

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362360

Because of the Bootstrap col padding the flexbox technique forces a wrap..

You could change the negative margin for the columns in the Bootply example:

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-1px;
}

http://www.bootply.com/4Lgpn9jVjc

Upvotes: 0

Slawa Eremin
Slawa Eremin

Reputation: 5415

Maybe this will help you:
1. you should delete this stroke:

flex:1 1 auto;

and browser can apply your width for column from styles ( width: 50% for col-md-6)

2. I do not understand why you need this styles, but you should fix your style to:

.row-flex > div[class*='col-']{
  margin: -2px; /* hack adjust for wrapping */
}

checkout my bootply: http://www.bootply.com/iA8AGiKIki

Upvotes: 1

Related Questions