缺少一些明显的东西并且 CSS 没有正确渲染

Question

出于某种原因，我尝试使用 Twitter 的 Bootstrap 制作一个简单的 HTML，但有些东西坏了我这边，我无法弄清楚出了什么问题。我在 此处 放置了一个 jsFiddle 页面，并附上了屏幕截图。问题是：

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

我似乎不明白我错过了什么步骤。这里已经很晚了，我可能会用另一双眼睛。有人可以告诉我我是否遗漏了一些明显的东西吗？这些按钮有风格，所以我不太确定发生了什么。

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 后，您似乎忘记将表单字段放入表单中。

输入始终需要进入

[...]

内部。

这是您的代码，其中包含表单标签： 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>