Twitter Bootstrap 3 встроенная и горизонтальная форма

Я пытаюсь перенести свою форму Bootstrap 2 в Bootstrap 3.
Мой текущий код и скрипка: http://jsfiddle.net/mavent/Z4TRx/

<div class="" id="myDialog1">

    <div class="" id="myDialog2">

        <form role="form" class="" id="contactForm" onsubmit="send(); return false;">
            <label>Please fill the form</label>
            <br/><br/>

            <div class="form-group">
                <label for="name">My Label 2</label>
                <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
            </div>

            <div class="form-group">
                <label for="email">My Label 3</label>
                <input type="email" class="form-control" name="email" id="email" required="required">
            </div>

            <div class="form-group">
                <label for="message">My Label 4</label>
                <textarea class="form-control" name="message" id="message" required="required"></textarea>
            </div>

            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button>
        </form>

    </div>


</div>

Я хочу встроенное поведение, моя метка 2 будет рядом с текстовым вводом, моя метка 3 будет рядом с текстовым вводом. Мне также нужно горизонтальное поведение, мой ярлык 4 будет поверх текстового поля. Мой ярлык 2 и мой ярлык 3 будут иметь ширину в 4 столбца, ширина моей метки 4 будет полной шириной формы.

Как я могу сделать это в Bootstrap 3?

Ответ 1

Просто потому, что документы предлагают использовать элементы управления формы, это не значит, что вам нужно. Вы можете использовать встроенную систему сетки для достижения макета. См. http://bootply.com/82900 для рабочего примера. Код ниже:

<div class="container">
  <form role="form">
    <div class="row">
      <label class="col-xs-4" for="inputEmail1">Email</label>
      <div class="col-xs-8">
        <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-4" for="inputPassword1">Password</label>
      <div class="col-xs-8">
        <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
      </div>
    </div>
    <div class="row">
      <label class="col-xs-12" for="TextArea">Text Area</label>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <textarea class="form-control" id="TextArea"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>
</div>

UPDATE: Я понял, что я сбросил метки меток. Обновлен ответ, заменив <label> на <div>.

ОБНОВЛЕНИЕ. Обновление кода, чтобы отразить необходимость оставаться в этом макете с малой шириной, как указано в комментариях ниже. См. http://jsfiddle.net/8xxUV/3 для рабочего примера.

Ответ 2

То, что вы ищете, на самом деле не является строковым поведением, просто горизонтальным.

Этот код должен помочь:

<div class="" id="myDialog1">
    <div class="" id="myDialog2">
        <form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
            <label>Please fill the form</label>
            <br><br>
            <div class="form-group">
                <label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="form-group">
                <label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
                <div class="col-lg-7 col-sm-7">
                    <input type="email" class="form-control" name="email" id="email" required="required">
              </div>
            </div>

            <div class="form-group">
                <label for="message" class="col-lg-3">My Label 4</label>
                <div class="col-lg-10 col-sm-10">
                     <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
        </form>
    </div>
</div>

И выглядит так:

Теги col-sm-* не являются обязательными: они просто останавливают элементы при укладке, когда вы уменьшаете размер окна.

Вы можете попробовать здесь: http://bootply.com/82889

Ответ 3

У меня была та же проблема, вот мое решение:

<form method="post" class="col-md-12 form-inline form-horizontal" role="form">
        <label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
        <div class="input-group col-sm-7">
            <input class="form-control" type="email" name="email" placeholder="[email protected]"/>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">Submit</button>
            </span>
        </div>
    </form>

вот Демо

Ответ 4

вы можете попробовать код ниже

<div class="" id="myDialog1">



        <form role="form" class="" id="contactForm" onsubmit="send(); return false;">
            <div class="clearfix igr col-md-12">
                <label>Please fill the form</label>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="name">My Label 2</label>
                </div>
                <div class="col-md-3">
                    <input type="text" class="form-control" name="name" id="name" required="required" value="myName">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <label for="email">My Label 3</label>
                </div>
                <div class="col-md-3">
                    <input type="email" class="form-control" name="email" id="email" required="required">
                </div>
            </div>

            <div class="clearfix igr col-md-12">
                <div class="col-md-12">
                    <label for="message">My Label 4</label>
                </div>
                <div class="col-md-3">
                    <textarea class="form-control" name="message" id="message" required="required"></textarea>
                </div>
            </div>
            <div class="clearfix igr col-md-12">
                <div class="col-md-2">
                    <button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
                </div>
            </div>
        </form>
    </div>

и используйте стили как:

label,textarea{
        margin:5px 0;
    }
    .igr{
        margin:15px 0;
    }

Ответ 5

Добавление класса control-label к вашим ярлыкам должно сделать трюк для вас.