Geek Answers Handbook

Bootstrap 3 Layout: Form Crashes Too Early

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

Working on [Select field] [Select Button]

So: all the elements are on the same line (a lot of free space is available for this).

But when I reduce the width of my browser, the page switches to a weird layout as soon as it reaches a width of 767 pixels:

Working on

[Select field expanding over the whole row]

[Select Button]

Despite the fact that, obviously, there is still a lot of space for saving the form in one line. Is there a (possibly simple) way to prevent this form from splitting into multiple lines?

I copied below the HTML page used to test the behavior 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 are greatly appreciated!

+4
source share
3 answers

div, (, "col-xs-2" ), :

<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>

"col-xs -...", . .

EDIT:

"form-horizontal" (. this), , . , .

+2

, bs3, Bs3

, 12 , , , col-sm-12

: () - ( / ) - ( 12 )

asp, Site.cc, .

bs3

, :

<form class="form-inline" role="form">
    <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    </div>
    <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
    </div>
    <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
    </div>
    <button type="submit" class="btn btn-default">Sign in</button>
</form>
0

, , Bootstrap, . , , . , xs . , , bootstrap, . ( ), , " " ". XS.

<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Reds" name="xx" checked> Reds</label>
<label style="width:3.5rem;"><input class="form-control-sm" type="radio" id="Blues" name="xx"> Blues</label>
<select name="type" class="form-control form-control-sm" style="width:7rem;">
<option value='0' selected='selected'>Shirts</option>
<option value='1'>Pants</option>
<option value='2'>Socks</option>
</select>
<button name="Find" type="submit" class="btn btn-g4 btn-sm">Find</button>
0

More articles:


All Articles