是否可以使用Bootstrap将多个控制组放在一行中

Question

I am using Bootstrap for creating a simple webpage. When I create a form containing some personal information, like first name, last name, email address, etc. Sometimes I prefer to make 2 control group (first name label & input field, and last name label & input field) in the same row. How can I achieve it ? It's not evident to do it in the Horizontal-form . Thanks for your help !

Answer 1

You can't do that with horizontal form, you must use .form-inline Twitter Bootstrap class .

<form class="form-inline">
    <label>First name</label>
    <input type="text" class="input-small" placeholder="First name"/>
    <label>Last name</label>
    <input type="text" class="input-small" placeholder="Last name"/>
</form>

http://jsfiddle.net/fq4wm/

Or, you can do that also in horizontal form, but you must to override many classes and properties, and I'll not recommend that. Better way is to use default Twitter Bootstrap classes for this stuff.

EDIT: You can combine horizontal and inline classes inside one form like this:

<form class="form-inline">
    <label>First name</label>
    <input type="text" class="input-small" placeholder="First name"/>
    <label>Last name</label>
    <input type="text" class="input-small" placeholder="Last name"/>
    <br/><br/><br/>
    <div class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputEmail">Email</label>
            <div class="controls">
                <input type="text" id="inputEmail" placeholder="Email"/>
            </div>
        </div>
        <div class="control-group">
           <label class="control-label" for="inputPassword">Password</label>
           <div class="controls">
               <input type="password" id="inputPassword" placeholder="Password"/>
           </div>
         </div>
     </div>
</form>

http://jsfiddle.net/fq4wm/6/

Answer 2

Change the class to make it an inline form:

<form class="form-inline">
   ...
</form>

Then it's easier to place fields in different rows and columns.