2011-08-21 141 views
0

出于某种原因,我尝试使用Twitter's Bootstrap制作一个简单的HTML,但在我身边破了一些东西,我无法弄清楚什么是错的。我提出了一个jsFiddle页面是here,并附上了截图。这些问题是:缺少明显的东西,CSS没有得到正确渲染

  • 文本框样式没有显示的引导页面上
  • 标签和文本框都没有得到对齐(上右左,文本框的标签)
  • 有场
  • 之间没有间隔
  • 下拉框不起作用。
  • 搜索框被搞砸

我好像不顶明白我错过了什么步骤。这里很晚,我可能会用另一只眼睛。有人可以告诉我,如果我失去了明显的东西吗?按钮的风格,所以我不知道发生了什么。

enter image description here enter image description here

回答

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中没有结束标记。

UPDATE

在你的HTML仔细看看后,它看起来像你忘了把你的表单字段的形式。

输入始终需要进入<form>[...]</form>

这里与表单标签再次是你的代码包括:http://jsfiddle.net/Lrczj/2/

+0

+1谢谢。老实说,我不知道我们需要添加我们自己的CSS,使它看起来像Bootstrap页面上的那些。那么这是否意味着,我需要添加自己的阴影效果来模仿文本框的外观?和下拉?抱歉!我只是有点困惑,因为我认为这是内置Bootstrap。 – Legend

+0

也许你没有。我不熟悉twitter bootstrap,但我现在快速浏览一下。 –

+0

查看我的更新@传奇。 –

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> 
+0

+1好抓!我修正了这个部分的问题。是的,不一致......我只注意到它!截图后我必须更新我的代码。 – Legend