在twitter bootstrap中格式化字段以显示为表格

对于CSS来说，我不是最好的。

我正在尝试通过严格使用CSS / javascript（或jQuery）格式化twitter bootstrap中的字段

这是我的HTML：

 
 
 Month  Day  Year  
 
  

我无法更改HTML，因为它是自动生成的，因此我设置样式的唯一方法是CSS或javascript。

这就是它现在的样子

编辑：尝试里根的解决方案后

 var html = $('.birthday-picker').html(); $('.birthday-picker').html('' + html + ''); 

我使用以下代码来尝试实现里根的解决方案，但没有运气:(

Answer 1

正如您所要求的仅CSS / JS解决方案..

您将需要使用元素(.control-group)包装label & select元素

 $("#DOB_picker").find("label").each(function(){ $(this).nextUntil("label").andSelf().wrapAll("
"); }); 

你的.control-group将需要以下css或类似的

  #DOB_picker .control-group { display: inline-block; zoom:1; float: left; } #DOB_picker .control-group label { text-align:left; } 

你真的想把这个CSS放在自定义的语义类下，这样它就不会丢弃你网站的其他部分。

---

工作实例

http://jsfiddle.net/blowsie/nJm2C/

Answer 2

用围绕你的字段，如下所示：

 
 
 
  Month  Day  Year   
 
  

这应该使它们都是内联的（如果它不是，那是因为你的输入和/或标签太宽而不能全部内联。

Answer 3

尝试：

 
 
 
 
 Month  
 
 Day  
 
 Year  
 
 
  

Answer 4

好的，这是用于将内容包装在行中的jQuery：

 $(document).ready(function () { ... $("#DOB_picker").wrap("
"); ... }); 

你将要玩的一件事是你给div包装的那个类（我使用了行，因为它可能就是这种情况）。 我不能给你这个答案的原因是因为你的页面布局可能不同，可能需要“排液”。 你会知道什么时候看到它。 以下是Bootstrap文档的链接，以防您需要使用其他类。

如果您有任何疑问，请告诉我。