Come posso fare in modo che i miei pulsanti di Twitter Bootstrap siano allineati a destra?

Ho una semplice dimostrazione qui:

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>

Ho una lista non ordinata e per ogni elemento della lista vorrei avere del testo a sinistra e poi un pulsante allineato a destra. Ho provato ad usare pull-right ma questo incasina completamente l'allineamento. Cosa sto facendo di sbagliato?

Soluzione

Inserisci pull-right nell'attributo class e lascia che bootstrap disponga i pulsanti.

Per Bootstrap 2.3, vedi: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right.

Per Bootstrap 3, vedi: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes.


Per Bootstrap 4, vedere: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

Il comando pull-right è stato rimosso e sostituito con float-right o in generale con float-{sm,md,lg,xl}-{left,right,none}.

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

Ho appena usato layout..apply styles for li..

**o per i file di testo, ma non per i file di testo, ma per i file di testo.

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

in CSS

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

Puoi provare un CSS personalizzato oltre al CSS di bootstrap per vedere se cambia qualcosa. Prova

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

Se funziona allora puoi provare a manipolare quello che hai o aggiungere altre formattazioni a questo e ottenere ciò che desideri. Il fatto che stai usando bootstrap non significa che se non ti offre quello che vuoi allora lo gestisci e basta. Stai lavorando con i tuoi codici e quindi gli ordini di fare come dici tu. Salute!

Commentari (2)