Geek Answers Handbook

How to combine checkbox and tags in bootstrap?

I have two lines of flags and labels. Although horizontal alignment is not a problem, there is a problem of vertical alignment of the second column. How can I achieve symmetry in this case?

<div class="form-inline"> <div class="form-group"> <div class="col-md-4"> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label> </div> <div class="col-md-4"> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label> </div> </div>

Jsfiddle

As you can see, the alignment of Moday and Friday (checkbox and label) is incorrect.

+4
source share
3 answers

I updated your fixed-width fiddle on a wrapper div .col-md-4 and placed tags using float with the width of each set of tags to take 1/3 of the width of the parents using the calc function:

 label{ float: left; width: calc(100%/3) }
+5
source

What if you put each flag in the col-sm-3 field?

 <div class="col-sm-3"> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label> </div>

https://jsfiddle.net/hobs766o/1/

+2
source

JsFiddle DEMO

 .col-md-4.first label { display: block; width: 99px; float: left; } .col-md-4.second label { display: block; width: 99px; float: left; } 

 <div class="form-inline"> <div class="form-group"> <div class="col-md-4 first"> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox0" value="0">Sunday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox1" value="1">Monday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox2" value="2">Tuesday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox3" value="3">Wednesday</label> </div> <div style="clear:left"></div> <div class="col-md-4 second" style=" "> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox4" value="4">Thursday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox5" value="5">Friday</label> <label class="radio-inline"> <input type="checkbox" name="inlineRadioOptionsWeek" id="Checkbox6" value="6">Saturday</label> </div> </div> </div>
+1
source

More articles:


All Articles