将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屋！