CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
James Wilson
James Wilson

Reputation: 809

How can I keep my selects on one line rather than stacking in Bootstrap?

I am using a form-inline class on my form and it looks great on a desktop. But when I get to the XS width EVERYTHING stacks one ontop of each other, but it's unnecessary. I only need each form-group to stack, not the form inputs inside each.

I would like to have the 3 date selects on one row and the 2 time selects on a new row below.

enter image description here

My HTML:

<form class="form-inline">
  <div class="form-group">        
    <label for="exampleInputName2">Passengers</label><br />
    <input type="text" class="form-control" id="exampleInputName2" placeholder="2">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Departure Date / Time</label><br />
    <select class="form-control" style="max-width:100px"><option>31</option></select>
    <select class="form-control" style="max-width:100px"><option>Jan</option></select>
    <select class="form-control" style="max-width:100px"><option>2015</option></select> <strong>at</strong>
    <select class="form-control" style="max-width:100px"><option>12</option></select> <strong>:</strong>
    <select class="form-control" style="max-width:100px"><option>00</option></select>

  </div>

</form>

Upvotes: 0

Views: 56

Answers (1)

CodingWithSpike
CodingWithSpike

Reputation: 43728

The Bootstrap example for .inline-form states:

Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

The CSS they include is:

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

so this is why the form changes to vertical at a small resolution. You should be able to prevent this behavior by adding the CSS:

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;

(the same as Bootstrap's CSS, but without the media query)

Upvotes: 1

Related Questions