0

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

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

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

在此处输入图像描述 在此处输入图像描述

4

2 回答 2

2

你可以通过一点 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/

于 2011-08-21T09:28:33.777 回答
1

你的 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>
于 2011-08-21T09:33:12.900 回答