0

CSSに関しては、私は最高ではありません。

CSS / JavaScript（またはjQuery）を厳密に使用して、Twitterブートストラップのフィールドをフォーマットしようとしています

ここに私の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>');

次のコードを使用して、レーガンのソリューションを実装しようとしましたが、うまくいきませんでした:(

4

4 に答える 4

4

CSS / JS のみのソリューションをリクエストしたため..

label & select要素を要素でラップする必要があります(.control-group)

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

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

</p>

次のcss.control-groupなどが必要です。

   #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/

于 2012-07-31T16:16:43.133 に答える
2

<row></row>あなたのフィールドを次のように囲みます：

<div class="span12">
    <div id="DOB_picker" class="DOB_picker">
        <fieldset class="birthday-picker">
            <row>
                <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>
            </row>        
        </fieldset>
    </div>
</div>

それはそれらをすべてインラインにするはずです（そうでない場合は、入力やラベルが広すぎてすべてをインラインにできないためです.

于 2012-07-31T16:14:28.477 に答える
0

さて、これがあなたのコンテンツを行でラップするjQueryです：

$(document).ready(function () {
    ...
    $("#DOB_picker").wrap("<div class='row' />");
    ...
});

あなたがいじくり回さなければならないことの1つは、あなたがラップしようとしているdivにどのクラスを与えるかです（私はおそらくそうなので、行を使用しました）。私があなたにこの答えを与えることができない理由は、あなたのページレイアウトが異なっている可能性があり、「行流体」を必要とする可能性があるためです。あなたがそれを見るときあなたは知っているでしょう。別のクラスを使用する必要がある場合に備えて、ブートストラップドキュメントへのリンクを次に示します。

ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-07-31T16:41:41.190 に答える
0

試してみてください：

<div class="span12">
    <div id="DOB_picker" class="DOB_picker">
        <fieldset class="row-fluid birthday-picker">
            <div class="span4">
              <label for="birth[month]">Month</label>
              <select class="birth-month" name="birth[month]"></select>
            </div>
            <div class="span4">
              <label for="birth[day]">Day</label>
              <select class="birth-day" name="birth[day]">
            </div>
            <div class="span4">
              <label for="birth[year]">Year</label>
              <select class="birth-year" name="birth[year]"></select>
            </div>         
        </fieldset>
    </div>
</div>
于 2012-07-31T16:17:09.413 に答える