Geek Answers Handbook

Twitter Bootstrap.col on <label>

When using Twitter bootstrap in two columns of 12 columns wide, when viewed on an xs device, they are displayed on the same line:

 <label for="contact" class="col-sm-3 control-label">Preferred Contact Method:</label> <label for="telephone" class="col-sm-2 control-label"> <small><em>Telephone</em></small> </label>

When viewed on a small mobile device, the columns should expand effectively to col-xs-12 ; however, both positions are shown next to each other, suggesting that this is not so. What is even more curious is that another element, such as col-sm-2 , appears on the next line.

The above problem and proper functionality can be achieved by wrapping either <label> in <div> . I got the impression that the col-* class can be used for any element; however, perhaps I misunderstood this, since applying it to <label> does not produce the expected results, i.e. <label> does not expand to fill row unless it happens after / after <div> .

Is my understanding wrong or something else in the game?

+4
source share
2 answers

I got the impression that the col-* class can be used for any element

Yes, in the general case, you can use col-* classes for almost any element, but without the row element around them, you might not get the results of the wait. (For example, .row includes negative margin on the left and right to resist filling between columns that create a “gutter” between them.)

However, for your specific problem here you can solve this in two ways.
Or add the col-xs-12 class on both of them - this will apply width:100% , and make them go all the way across small screens.
Or add label { display:block; } label { display:block; } , which will also make them full width - by default they are inline elements.

+2
source

The following code is what I think you want:

 .control-label{ background:#00F; color:#FFF; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <label for="contact" class="col-xs-12 col-sm-3 col-md-6 control-label">Preferred Contact Method:</label> <label for="telephone" class="col-xs-12 col-sm-2 col-md-6 control-label"> <small><em>Telephone</em></small> </label>

This is the full width on very small devices (less than 768 pixels) - col-xs - one quarter of the width on small devices (between 768px and 992px) - col-sm - and the half-width on any device is larger than this - col-md .

If I'm wrong, just say to update my answer. If that helps, +1.

+1
source

More articles:


All Articles