...">
Clever Geek Handbook

Bootstrap 3.0.3 vs 3.2.0 difference

The same code produces different results in bootstrap versions 3.0.3 and 3.2.0

<div class="form-inline">
    <div class="form-group">
        <label>Date: </label>
        <input name="startdate" class="form-control" type="date">
    </div>
    <div class="form-group">
        <label>Optional Search String: </label>
        <input class="form-control" type="text">
    </div>
  <div class="form-group" style="vertical-align:bottom">
        <button type="button" class="btn btn-primary">Search</button>
  </div>
</div>

3.0.3 enter image description here3.0.3 example

3.2.0 enter image description here3.2.0 example

How can I achieve the same layout with a newer bootstrap version?

+3


source to share


1 answer


Use width: auto;

instead of width: 100%;

up .form-inline .form-control

- DEMO

CSS

.form-inline .form-control {
    width: auto;
}


[EDITED]

According to your old width:auto;

media-only version min-width:768px

: - DEMO 

@media (min-width:768px) {
    .form-inline .form-control {
        display:inline-block;
        width:auto;
        vertical-align:middle
    }
}
+5


source






More articles:


All Articles