Отсутствует что-то очевидное, и CSS не отображается должным образом

Question

По какой-то причине я попытался создать простой HTML-код, используя Bootstrap Twitter , но что-то сломалось на моей стороне , и я не могу понять, что не так.Я поднял страницу jsFiddle здесь и также приложил скриншот.Проблемы:

• Стили текстовых полей не такие, как показано на странице начальной загрузки
• Метки и текстовые поля не выравниваются (метки слева, текстовые поля справа)
• Между полями нет промежутка
• Раскрывающийся список не работает.
• Окно поиска запутано

Кажется, я не совсем понимаю, какой шаг мне не хватает.Здесь довольно поздно, и я мог бы использовать другой набор глаз.Может кто-нибудь сказать мне, если я что-то упускаю очевидное?Кнопки приобретают стиль, поэтому я не совсем уверен, что происходит.

Answer 1

Этого можно добиться с помощью небольшого количества CSS.

Плавающий ввод и метка слева, а затем добавление небольшого поля.

label,input
{
    float:left;
    margin-bottom:5px;
}
label{
    clear:left;
    width:50px;
}

Демонстрация: http://jsfiddle.net/Lrczj/1/

Также обратите внимание, что эта часть является недопустимым HTML:

<input id="enableTooltip" type="checkbox">Enable tooltip </input>

Вам просто нужно превратить текст в метку, как в других текстовых полях.У ввода нет закрывающего тега в HTML.

ОБНОВЛЕНИЕ

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

Входные данные всегда должны входить внутрь <form>[...]</form>.

Вот ваш код снова с включенными тегами формы: http://jsfiddle.net/Lrczj/2/

Answer 2

Ваш jsFiddle действительно не похож на ваш скриншот для меня?
Я посмотрел на вашу разметку и обнаружил ошибку:

<input id="enableTooltip" type="checkbox">Enable tooltip </input>

Вы не можете поместить текст во входные данные, напримертот.Вам необходимо изменить его на:

<input id="enableTooltip" type="checkbox" />Enable tooltip

или:

<input id="enableTooltip" type="checkbox"><label>Enable tooltip</label>