Kako lahko gumbe Twitter Bootstrap poravnam v desno?

Tukaj imam preprost demo:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

Imam neurejen seznam in za vsako postavko seznama želim imeti besedilo na levi in nato desno poravnan gumb. Poskušal sem uporabiti funkcijo pull-right, vendar ta popolnoma zmoti poravnavo. Kaj delam narobe?

Rešitev

V atribut razreda vstavite pull-right in omogočite, da bootstrap uredi gumbe.

Za Bootstrap 2.3 glejte: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right.

Za Bootstrap 3 glejte: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes.


Za Bootstrap 4 glejte: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

Ukaz pull-right je bil odstranjen in nadomeščen z ukazom float-right ali na splošno z ukazom float-{sm,md,lg,xl}-{left,right,none}

Komentarji (4)
<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

Pravkar sem uporabil layout..apply styles for li..

ali

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

v CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}
Komentarji (2)

Lahko poskusite po meri CSS poleg bootstrap CSS, da vidite, če se kaj spremeni. Poskusite

.move-rigth{
    display: block;
    float: right;
}

Če deluje, lahko poskusite manipulirati s tem, kar imate, ali temu dodate drugo oblikovanje in dosežete, kar želite. Ker uporabljate bootstrap, še ne pomeni, da če vam ne ponudi tistega, kar želite, potem to preprosto uredite. Delujete s svojimi kodami in tako mu zapovedujete, naj naredi, kar ste rekli. Na zdravje!

Komentarji (2)