Bootstrap: Measures: 1020x1110: col-sm-12 is not a full line

Created on 27 Jan 2017 · 5Comments · Source: twbs/bootstrap

BECAUSE this rule is set:
@media (min-width: 992px)
.col-lg-7 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 58.333333%;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}

so the with is not 100%.

awaiting-reply css v4

Source

PaulhaMi

All 5 comments

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin and report back with specific browser and OS details.

mdo on 27 Jan 2017

👍1

I tried to reduce my html for this Problem:

When there is a measure between 992px and 1023px then there should be one full row (width = 100%) for each DIV. So there should be 2 rows with 1 colum each.
But it isn't because the rule I mentiont before (max-with: 58,33%) will reduce the row. And now there is one row with 2 colums

I fixed the prolbem with the following rule:
@media (min-width: 992px) and (max-width: 1023px) {
.col-sm-12 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}

os: win 10
browser: IE11, Chrome 55.0, Firefox 51.0.1

PaulhaMi on 30 Jan 2017

👎1

The HTML

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7"/>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5"/>

PaulhaMi on 30 Jan 2017

👎1

you cannot write styles for particular screen

hidaytrahman on 4 Feb 2017

There's still no demo here @PaulhaMi. Closing out until we hear more. Until then, I suggest revisiting the documentation for how to use these grid classes.

mdo on 5 Feb 2017

Was this page helpful?

0 / 5 - 0 ratings