Christophe Christophe - 1 month ago 6
CSS Question

Bootstrap 3 layout: form collapsing too soon

I would like to get the following layout of my form using bootstrap:

Working on [Select field] [Select Button]


So: all elements are on a single row (there is plenty of space available for that).

But when I decrease the width of my browser the page switches to a weird layout as soon as it is reaching 767 pixels wide:

Working on

[Select field expanding over the whole row]

[Select Button]


While there is obviously still plenty of space to keep the form on a single row. Is there a (possibly simple) way to prevent that form to break into several lines?

I copied below the HTML page used for testing the behaviour described above :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 pull-left">
<a href="#">
Test Page
</a>
</div>
<div class="col-sm-6 pull-right">
You are logged in as abc@xyz.com
</div>
</div>

<div class="row">
<form class="navbar-form navbar-left" role="search" action="#" method="post">
<div class="form-group">

<label for="id_field1" class="control-label">Working on</label>
<select class="form-control" id="id_field1" name="field1">
<option value="1" selected="selected">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
</div>
<button type="submit" class="btn btn-default">Select</button>
</form>
</div>

<div class="row">
<div class="col-sm-12">
Stuff will come here...
</div>
</div>

<div class="row">
<div class="col-sm-12">
<p>This is a footer</p>
</div>
</div>
</div>

</body></html>


Any help and suggestions much appreciated!

Answer

Surround each item in the row with a div which has a column size class (like "col-xs-2"), like so:

<div class="form-group">
    <div class="col-xs-2">
        <label for="id_field1" class="control-label">Working on</label>
    </div>
    <div class="col-xs-6">
        <select class="form-control" id="id_field1" name="field1">
            <option value="1" selected="selected">Choice 1</option>
            <option value="2">Choice 2</option>
            <option value="3">Choice 3</option>
         </select>
     </div>

     <div class="col-xs-4">
          <button type="submit" class="btn btn-default">Select</button>
     </div>

 </div>

As long as you use 'col-xs-...', every column on that row will stay on the same row even on small devices. Here's a fiddle.

EDIT:

Changing the form class to 'form-horizontal' changes the form-groups to behave as grid rows (see this), which allows the column sizing to stay consistent across all display sizes. Here's a new fiddle reflecting that change.

Comments