Bootstrap 3: как создать встроенную форму с выборами и ярлыками?

Мои метки продолжают отображаться над выборами. Я хочу, чтобы все они были на одной линии. Pls видит jsfiddle: http://jsfiddle.net/jjgelinas77/9nL9x/

<div class="well well-sm">
  <form name="myForm" role="form" novalidate="novalidate" class="form-inline">
    <div class="form-group">
      <label>C-Band</label>
      <select id="cband" class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <div class="form-group">
      <label>C-Band</label>
      <select ng-model="form.cband2" id="cband2" class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option value="Other">Other</option>
      </select>
    </div>
    <button class="btn btn-primary">Filter</button>
  </form>
</div>

Ответы

Ответ 1

В бутстрапе есть правило CSS, которое устанавливает ширину .form-control до 100% при малых размерах экрана. Таким образом, даже когда он будет всплывать, он займет всю ширину и, следовательно, начнется с новой строки. Хорошая новость - вам нужно только пару строк CSS, чтобы переопределить ее:

.form-control {
width:auto;
display:inline-block;
}

Надеюсь, это упростит проблему для тех, кто все еще сталкивается с этой проблемой! http://jsfiddle.net/c3m77ah6/2/

Ответ 2

Вы должны обернуть label вокруг select. Вот так:

<div class="form-group">
  <label>C-Band
      <select id="cband" class="form-control">
         <option value="C15+">C15+</option>
         <option value="C12-14">C12-14</option>
         <option value="Other">Other</option>
      </select>
  </label> 
</div>

Затем добавьте следующий CSS:

.form-group label {
    float: left;
    text-align: left;
    font-weight: normal;
}

.form-group select {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

Вот ваш обновленный скрипт: Обновленный скрипт

Ответ 3

Он работает, если вы используете последнюю загрузку: @import url ('http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

И НЕ ЗАБУДЬТЕ, чтобы сделать столбец с результатом более 768 пикселей. Form-inline работает только в том случае, если экран имеет более 768 пикселей. (Просто перетащите столбец с помощью мыши)

Проблема была с css для

@media (min-width: 768px)
.form-inline .form-control {
    //old bootstrap    
    display: inline-block;

    // new bootstrap
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

Ответ 4

Эта проблема настолько рекуррентна, что есть проект Github, решающий ее

https://fk.github.io/select2-bootstrap-css/

Поместите свой CSS файл сразу после CSS из Select2

<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/select2-bootstrap.css">

Затем вы можете использовать метку вместе с выбором

<div class="form-group">
    <label for="sName">Select Title</label>
    <select class="js-example-basic-single form-control" id="sName">
    </select>
</div>