html - padding between col-md2 elements -
my goal show 6 columns in 1 row. here's part of how them done (shown first 3).
i have code:
<div class="col-md-2"> <input mytr="first_name" mytrid="" name="first_name[]" id="first_name" class="form-control" placeholder="first name" type="text"> </div> <div class="col-md-2"> <input mytr="middle_name" mytrid="" name="middle_name[]" id="middle_name" class="form-control" placeholder="middle name" type="text"> </div> <div class="col-md-2"> <input mytr="last_name" mytrid="" name="last_name[]" id="last_name" class="form-control" placeholder="last name" type="text"> </div>
it produces following controls padding between them:
i'd editors have 1px of padding , them close 1 possible.
what add class this? if possible @ all?
you need change .col-md-2
padding values. in following html added .little-padding
class use , make different padding.
<div class="container"> <div class="row little-padding"> <div class="col-md-2"> <input mytr="first_name" mytrid="" name="first_name[]" id="first_name" class="form-control" placeholder="first name" type="text"> </div> <div class="col-md-2"> <input mytr="middle_name" mytrid="" name="middle_name[]" id="middle_name" class="form-control" placeholder="middle name" type="text"> </div> <div class="col-md-2"> <input mytr="last_name" mytrid="" name="last_name[]" id="last_name" class="form-control" placeholder="last name" type="text"> </div> </div> </div>
you can have css. instead of padding-left:15px;
, padding-right:15px;
(which bootstrap's default values) gave padding-left:0;
, padding-right:1px;
.
after that, gave default padding values first , last child .col-md-2
divs stay inside .row
.
.row.little-padding .col-md-2 {padding-right:1px; padding-left:0;} .row.little-padding .col-md-2:first-child {padding-left:15px;} .row.little-padding .col-md-2:last-child {padding-right:15px;}
here working demo.
note: if want behavior other classes need use [class^="col-"]
selector applies col-*
classes (demo here) might not work cases.
Comments
Post a Comment