Форма Bootstrap inline не работает

Я пытаюсь добавить эту простую форму поиска при применении встроенного класса формы, чтобы элементы управления появлялись рядом друг с другом, но я получаю элементы управления, отображаемые друг над другом, и дно поиска в белом и выглядит странно, поэтому может кто-нибудь сказать мне, что мне здесь не хватает?

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>
9
css twitter-bootstrap

2 ответов

из ссылки Bootstrap, для встроенных форм :

Это касается только формы в окнах, которые как минимум 768px широкий.

а что касается вашего макета,

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

это прекрасно..inline:

рабочая демо

9

у меня была аналогичная проблема с фрагментом кода из bootstrap. Я обнаружил, что 2 класса "control-group" и "controls" сломали встроенный. удаление 2 классов исправило это для меня.

<div class="control-group">
            <label class="control-label" for="Name">Name</label>
            <div class="controls">
                <input type="text" id="Name" placeholder="Name">
            </div>
        </div>

в:

            <label class="control-label" for="Name">Name</label>

                <input type="text" id="Name" placeholder="Name">
0