javascript - 格式化 Twitter Bootstrap 中的字段以显示为表格

Question

说到 CSS，我不是最好的。

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

这是我的 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。

这是现在的样子

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

var html = $('.birthday-picker').html();
$('.birthday-picker').html('<row>' + html + '</row>');

我使用下面的代码来尝试实现里根的解决方案但是没有成功 :(

Answer 1

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

您需要用 (.control-group) 元素包裹您的 label & select 元素

$("#DOB_picker").find("label").each(function(){

     $(this).nextUntil("label").andSelf().wrapAll("<div class='control-group'></div>");
});

您的 .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/