CSS: выравнивание элемента управления формы с помощью начальной загрузки 3

Question

Это может быть что-то простое, что мне не хватает, но я не могу понять, хотя это. Я использую загрузчик 3 в моем приложении. В моей форме есть некоторые элементы управления, такие как выпадающие списки, текстовые поля, метки и т. Д. См. Пример ниже:

<div class="modal-body">
<form role="form" name="form" class="form-body">
    <div class="form-group"> 
        //form label here
        <div class="m-grid-col-sm-5">               
           //form element here
        </div>
    </div>
</form>
<div>

Выше приведен только пример. Проблема в том, что когда я запускаю свое приложение, я вижу, что ярлык всегда находится над элементом управления. То, что я хочу, это ярлык слева и элемент управления формой (выпадающий список, текстовое поле и т. Д.) Справа.

Вы можете видеть, что я создал образец jsfiddle по адресу: https://jsfiddle.net/aman1981/xprh2tno/8/

Пожалуйста, не обращайте внимания на модальный класс, так как проблема не в том, что я не в модальном, а в других формах моего приложения.

Я пытался настроить и использовать другой класс, но похоже, что он не корректируется.

Answer 1

Вы можете попробовать этот код здесь

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">


<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="name" class="col-xs-2 control-label">Name</label>
    <div class="col-xs-10">
      <input type="text" class="form-control" id="name" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label for="inputEmail3" class="col-xs-2 control-label">Email</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>

<div class="form-group">
    <label for="sex" class="col-xs-2 control-label">Sex</label>
    <div class="col-xs-10">
       <select name="sex" class="auto-width setup-inline form-control input-medium" required>
          <option value="">---Please select---</option>
          <option value="m">Male</option>
          <option value="f">Female</option>
       </select>
    </div>
</div>


  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10 text-right">
      <button type="submit" class="btn btn-success">Submit</button>
    </div>
  </div>
</form>

Answer 2

Вы должны обратиться к разделу Горизонтальная форма в документации здесь: http://bootstrapdocs.com/v3.0.3/docs/css/#forms

HTML:

  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox"> Remember me
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Sign in</button>
      </div>
    </div>
  </form>

Демо: https://jsfiddle.net/xprh2tno/12/