I
I
ie95582014-07-10 10:35:07
User interface
ie9558, 2014-07-10 10:35:07

How to place input fields next to each other in bootstrap horizontal form?

I don't know how to make a shape.
[STREET:] [____________________________]
[INDITION] HOUSE: [__] ST: [__] BODY: [__]
from the end of the INDITION to the end of the line should
be consistent without large indents.
only stretched or compressed fields
and not squeezed into GRIDs.
[STREET:] [______________________________________________]
[SET OFF] HOUSE: [______] AP: [______] BODY: [______]

<form role="form" class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3">Улица</label>
        <div class="col-sm-9">
            <input type="email" class="form-control">
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-offset-3 col-sm-2">Дом</label>
        <div class="col-sm-1">
        <input type="email" class="form-control">
        </div>

        <label class="col-sm-2">Квартира</label>
        <div class="col-sm-1">
        <input type="email" class="form-control">
        </div>

        <label class="col-sm-2">Корпус</label>
        <div class="col-sm-1">
        <input type="email" class="form-control">
        </div>

      </div>

      <button type="submit" class="pull-right btn btn-success">Заказать</button>
    </form>

Answer the question

In order to leave comments, you need to log in

2 answer(s)
Y
Yuri Lobanov, 2014-07-10
@iiil

So add your own classes and make it up, what's the question?

A
Anton Yatsenyuk, 2014-07-10
@spamforhope

first, remove the grid classes from all labels, they can be placed using css, for the form add the col-sm-9 class (or as many as you need)
Then for each input in the form add a class and css for it

.class {
float: left;
}

.class:first-child {
margin-left: 15px;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question