缺少明显的东西，CSS没有得到正确的渲染

Question

出于某种原因，我尝试使用Twitter's Bootstrap创建一个简单的HTML，但是我身边的某些内容被打破了，我无法弄清楚出了什么问题。我提出了一个jsFiddle页面here，并附上了截图。问题是：

• 文本框样式不在“引导程序”页面上显示
• 标签和文本框未对齐（左侧标签，右侧文字框）
• 字段之间没有间距
• 下拉框不起作用。
• 搜索框搞砸了

我似乎并不了解我错过了哪一步。现在已经很晚了，我可能会用另一双眼睛。有人可以告诉我，如果我遗漏了一些明显的东西吗？按钮得到了风格，所以我不确定发生了什么。

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>