将twitter引导程序中的字段设置为像表一样显示 [英] Format fields in twitter bootstrap to show like a table
问题描述
我不是最好的,当谈到CSS到这里去。
I'm not the best when it comes to CSS to here goes.
我试图通过严格使用CSS / javascript(或jQuery)来在twitter引导中格式化字段。
I'm trying to format fields in twitter bootstrap by strictly using CSS / javascript (or jQuery)
这是我的HTML:
<div class="span12">
<div id="DOB_picker" class="DOB_picker">
<fieldset class="birthday-picker">
<label for="birth[month]">Month</label>
<select class="birth-month" name="birth[month]"></select>
<label for="birth[day]">Day</label>
<select class="birth-day" name="birth[day]">
<label for="birth[year]">Year</label>
<select class="birth-year" name="birth[year]"></select>
</fieldset>
</div>
</div>
我无法更改HTML,因为它是自动生成的,因此是我唯一的方式是CSS或JavaScript。
I can not change the HTML as it is auto generated and therefore the only way for me to style it is CSS or javascript.
这是现在的样子
编辑:尝试完试用后的解决方案
After trying reagan's Solution
var html = $('.birthday-picker').html();
$('.birthday-picker').html('<row>' + html + '</row>');
我使用下面的代码尝试实现reagan的解决方案,但没有运气:
I used the following code to try to implement reagan's solution but had no luck :(
推荐答案
正如您要求的 CSS / JS only 解决方案。
As you requested a CSS / JS only solution..
您需要使用元素(。control-group)
包装您的标签和选择
You will need to wrap your label & select
elements with a element (.control-group)
$("#DOB_picker").find("label").each(function(){
$(this).nextUntil("label").andSelf().wrapAll("<div class='control-group'></div>");
});
您的 .control-group
将需要以下css或类似的
Your .control-group
will need the following css, or similar
#DOB_picker .control-group {
display: inline-block;
zoom:1;
float: left;
}
#DOB_picker .control-group label {
text-align:left;
}
工作范例
http://jsfiddle.net/blowsie/ nJm2C /
这篇关于将twitter引导程序中的字段设置为像表一样显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!