Nie jestem najlepszy, jeśli chodzi o CSS tutaj.

Próbuję sformatować pola w Twitter Bootstrap, ściśle przy użyciu CSS / JavaScript (lub jQuery)

Oto mój kod 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>

Nie mogę zmienić HTML, ponieważ jest to auto generowane, a zatem jedynym sposobem dla mnie stylu jest CSS lub JavaScript.

To jest teraz, jak wygląda teraz

enter image description here

Edytuj: Po wypróbowaniu rozwiązania Reagana

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

Użyłem następującego kodu, aby spróbować wdrożyć rozwiązanie Reagana, ale nie miał szczęścia :(

0
Farhan Ahmad 31 lipiec 2012, 20:11

3 odpowiedzi

Otacz swoje pola za pomocą <row></row> jak:

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

To powinno sprawić, że wszystkie są wbudowane (a jeśli nie jest to dlatego, że twoje dane wejściowe i / lub etykiety są zbyt szerokie, aby wszyscy były włączone.

2
reagan 31 lipiec 2012, 16:14

Spróbuj z:

<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>
0
Miljan Puzović 31 lipiec 2012, 16:17

Dobra, oto jQuery, aby owinąć treść w wierszach:

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

Jedyną rzeczą, z którą będziesz musiał się bawić, jest jaką klasą dajesz Div, że zamierzasz owijać się (używałem wiersza, ponieważ jest to prawdopodobny przypadek). Powód, dla którego nie mogę podać tej odpowiedzi, ponieważ układ strony może być inny i może wymagać "płynu rzędu". Będziesz wiedział, kiedy go zobaczysz. Oto link do Dokumentacja Bootstrap w przypadku należy użyć innej klasy.

Daj mi znać, jeśli masz jakieś pytania.

0
Zachary Kniebel 31 lipiec 2012, 16:41