Come posso ottenere i miei pulsanti Bootstrap di Twitter per allineare a destra?

Ho una semplice demo 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 un elenco non ordinato e per ogni elemento dell'elenco desidero avere il testo a sinistra e quindi un pulsante allineato a destra. Ho provato a usare pull-right ma questo rovina completamente l'allineamento. Che cosa sto facendo di sbagliato?

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

Per Bootstrap 2.3 , consultare: http://getbootstrap.com/2.3.2/components.html#misc > Classi di supporto> .pull-right.

Per Bootstrap 3 , consultare: https://getbootstrap.com/docs/3.3/css/#helper-classes > Classi di supporto.

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

Il pull-rightcomando è stato rimosso e sostituito con float-righto in generale afloat-{sm,md,lg,xl}-{left,right,none}

In twitter bootstrap 3 prova la classe pull-right

class="btn pull-right"

La classe "pull-right" potrebbe non essere quella giusta perché negli usi "float: right" anziché text-align.

Controllando il file css bootstrap 3 ho trovato la classe "text-right" sulla riga 457. Questa classe dovrebbe essere il modo giusto per allineare il testo a destra.

Qualche codice:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Aggiornamento 2019 - Bootstrap 4.0.0

La pull-rightclasse è ora float-rightin Bootstrap 4 ...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

È anche meglio non allineare l'elenco ul e usare elementi di blocco per le righe.

Non funziona float-rightancora?

Ricorda che Bootstrap 4 è ora flexbox e sono molti gli elementi display:flexche possono impedire a float-right di funzionare. In alcuni casi, le classi util gradiscono align-self-endo ml-autolavorano per allineare a destra gli elementi che si trovano all'interno di un contenitore flexbox come Bootstrap 4 .row, Card o Nav.

Ricorda anche che text-rightfunziona ancora su elementi incorporati.

Bootstrap 4 allinea gli esempi giusti

Bootstrap 3

Usa la pull-rightclasse.

Usa il buttontag anziché inpute usa la pull-rightclasse.

pull-right La classe rovina totalmente entrambi i pulsanti, ma puoi risolvere il problema definendo il margine personalizzato sul lato destro.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Quindi utilizzare il seguente CSS per la classe

.RbtnMargin { margin-left: 5px; }

Aggiungendo alla risposta accettata, quando lavoro all'interno di contenitori e colonne che hanno un'imbottitura integrata da bootstrap, a volte ho una colonna completamente allungata con un div figlio che fa il pull per essere la strada da percorrere.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

In alternativa, aggiungi tutte le tue colonne al numero totale di colonne della griglia (12 per impostazione predefinita) e fai in modo che la prima colonna sia sfalsata.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

Ci scusiamo per la risposta a una domanda più vecchia già risposta, ma ho pensato di sottolineare un paio di motivi per cui il tuo jsfiddle non funziona, nel caso in cui altri lo provino e mi chiedo perché la classe pull-right come descritta nella risposta accettata non lo fa non ci lavoro.

1. l'URL del file bootstrap.css non è valido. (forse ha funzionato quando hai posto la domanda).
2. dovresti aggiungere l'attributo: type = "button" al tuo elemento di input, altrimenti non verrà visualizzato come pulsante: verrà visualizzato come una casella di input. Meglio ancora, usa <button>invece l' elemento.
3. Inoltre, poiché pull-right utilizza i float, si otterrà una sconcertante disposizione del pulsante perché ogni LI non ha un'altezza sufficiente per accogliere l'altezza del pulsante. L'aggiunta di alcuni css di altezza di linea o altezza minima al LI indirizzerebbe questo.

violino di lavoro: http://jsfiddle.net/3ejqufp6/

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

(Ho anche aggiunto una larghezza minima ai pulsanti perché non potevo sopportare l'aspetto di uno sfilacciato giustificato a destra ai pulsanti a causa delle diverse larghezze :))

L'uso dell'helper Bootstrap pull-rightnon ha funzionato per noi perché lo utilizza float: right, il che forza gli inline-blockelementi a diventareblock . E quando .btndiventano block, perdono il margine naturale che inline-blockli stava fornendo come elementi quasi testuali.

Quindi invece abbiamo usato direction: rtl;l'elemento genitore, che fa sì che il testo all'interno di quell'elemento sia impaginato da destra a sinistra e che induca anche gli inline-blockelementi di impaginare da destra a sinistra. Puoi usare MENO come il seguente per evitare che anche i bambini vengano disposti rtl:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

e usalo come:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

In Bootstrap 4 : prova in questo modo con Flexbox. Vedi la documentazione in getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

Pull right è stato deprezzato dalla v3.1.0. Solo un avviso.

http://getbootstrap.com/components/#callout-dropdown-pull-right

Applica la pull-rightclasse per il pulsante. http://getbootstrap.com/css/#helper-classes-floats -> Classi di supporto

Questo link ti aiuterà

Ora devi aggiungere .dropdown-menu-right all'elemento .dropdown-menu esistente. pull-right non è più supportato. Maggiori informazioni qui http://getbootstrap.com/components/#btn-dropdowns

Puoi provare un CSS personalizzato a parte il CSS bootstrap per vedere se ci sono cambiamenti. Provare

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

Se funziona, puoi provare a manipolare ciò che hai o aggiungere altra formattazione a questo e ottenere ciò che desideri. Perché 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. Saluti!

<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 gli stili layout..apply per li ..

o

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

puoi anche usare colonne vuote per dare spazi a sinistra

piace

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Demo :: Demo di Jsfiddle

Da Bootstrap V3.3.1 il seguente stile CSS risolverà questo problema

.modal-open{
    padding-right: 0 !important;
}

Nota: ho provato tutti i suggerimenti nei post precedenti e tutti gli indirizzi versioni precedenti e non forniscono una correzione per le versioni bootstrap newset.

per la documentazione di bootstrap 4

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>