缺少一些明显的东西并且 CSS 没有正确呈现答案

【问题标题】：Missing something obvious and CSS is not getting rendered properly缺少一些明显的东西并且 CSS 没有正确呈现
【发布时间】：2011-10-31 12:47:09
【问题描述】：

出于某种原因，我尝试使用Twitter's Bootstrap 制作一个简单的 HTML，但是 我这边 出了点问题，我无法弄清楚哪里出了问题。我建立了一个 jsFiddle 页面是 here 并附上了截图。问题是：

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

【问题讨论】：

【解决方案1】：

你可以用一点 CSS 来实现这一点。

将输入和标签浮动到左侧，然后添加一点边距。

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

还要注意这部分是无效的 HTML：

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

您只需像使用其他文本字段一样将文本制作成标签。输入在 HTML 中没有结束标记。

更新

仔细查看您的 HTML 后，您似乎忘记将表单字段放入表单中。

输入总是需要进入<form>[...]</form>。

这是您的代码，其中包含表单标签：http://jsfiddle.net/Lrczj/2/

【讨论】：

+1 谢谢。老实说，我不知道我们需要添加自己的 CSS 以使其看起来像 Bootstrap 页面上的那些。那么这是否意味着，我需要添加自己的阴影效果来模仿文本框的外观？和下拉？对不起！我只是有点困惑，因为我认为这是 Bootstrap 内置的。
也许你不知道。我不熟悉 twitter bootstrap，但我现在快速浏览一下。
天哪！这很尴尬！我要回家睡觉了！非常感谢您指出这一点。
这些事情发生在我们最好的人身上。 :)

【解决方案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>

【讨论】：