Bootstrap3のThumbnailsをjavascriptなしで高さを揃えるcss

元ネタはコチラですが、IEで崩れてたりFireFoxでも崩れていたのでちょこっと修正しています
Bootstrap Equal height colums with CSS Flexbox snippet – 7UhIWMK808

~~~
.row-flex, .row-flex > div[class*=’col-‘] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*flex:1 0 0;*/
}

.row-flex-wrap {
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;/*— IE10用 —*/
flex-flow: row wrap;
align-content: flex-start;
flex:1 0 0;
}

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

.container-flex > div[class*=’col-‘] div,.row-flex > div[class*=’col-‘] div {
width:100%;
}

.flex-col {
display: flex;
display: -webkit-flex;
flex: 1 100%;
flex-flow: column nowrap;
}

.flex-grow {
display: flex;
-webkit-flex: 2;
flex: 2;
}
~~~

使ってるサイト
世界のウミウシ

コメント

タイトルとURLをコピーしました