Hoe kan ik mijn Twitter Bootstrap-knoppen rechts uitgelijnd krijgen?

Ik heb hier een eenvoudige demo:

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

Ik heb een ongeordende lijst en voor elk lijstitem wil ik tekst aan de linkerkant en dan een rechts uitgelijnde knop. Ik heb geprobeerd om pull-right te gebruiken, maar dit verpest de uitlijning volledig. Wat doe ik verkeerd?

Antwoord 1, autoriteit 100%

Voeg pull-rightin het class attribuut in en laat bootstrap de knoppen rangschikken.

Voor Bootstrap 2.3, zie: http://getbootstrap .com/2.3.2/components.html#misc> Helperklassen > .trek-rechts.

Voor Bootstrap 3, zie: https:// getbootstrap.com/docs/3.3/css/#helper-classes> Helperklassen.

Voor Bootstrap 4, zie: https:// getbootstrap.com/docs/4.0/utilities/float/#responsive

De opdracht pull-rightis verwijderd en vervangen door float-rightof in het algemeen door float-{sm,md,lg,xl}-{left,right,none}

Antwoord 2, autoriteit 34%

Probeer in twitter bootstrap 3 de klasse pull-right

class="btn pull-right"

Antwoord 3, autoriteit 20%

De klasse “pull-right” is misschien niet de juiste manier omdat in “float: right” wordt gebruikt in plaats van text-align.

Toen ik het CSS-bestand van Bootstrap 3 controleerde, vond ik de klasse “text-right” op regel 457. Deze klasse zou de juiste manier moeten zijn om de tekst rechts uit te lijnen.

Enkele code:

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

Antwoord 4, autoriteit 10%

Update 2019 – Bootstrap 4.0.0

De klasse pull-rightis nu 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

Het is ook beter om de ul-lijst niet uit te lijnen en blokelementen voor de rijen te gebruiken.

Werkt float-rightnog steeds niet?

Onthoud dat Bootstrap 4 nu flexbox is, en veel elementen zijn display:flexdie kunnen voorkomen dat float-right werkt. In sommige gevallen werken de util-klassen zoals align-self-endof ml-autovoor het rechts uitlijnen van elementen die zich in een flexbox-container bevinden, zoals een Bootstrap 4 .row, Card of Nav.

Onthoud ook dat text-rightnog steeds werkt op inline-elementen.

Bootstrap 4 rechts uitlijnen

Bootstrap 3

Gebruik de klasse pull-right.

Antwoord 5, autoriteit 3%

Gebruik buttontag in plaats van inputen gebruik pull-rightclass.

De klasse

pull-righthaalt beide knoppen volledig in de war, maar je kunt dit oplossen door een aangepaste marge aan de rechterkant te definiëren.

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

Gebruik dan de volgende CSS voor de klasse

.RbtnMargin { margin-left: 5px; }

Antwoord 6, autoriteit 3%

Als aanvulling op het geaccepteerde antwoord, heb ik soms een volledig uitgerekte kolom met een onderliggende div die het trekken doet om de juiste weg te zijn wanneer ik werk in containers en kolommen die opvulling van bootstrap hebben ingebouwd.

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

U kunt ook al uw kolommen optellen tot uw totale aantal rasterkolommen (standaard 12) en de eerste kolom moet worden verschoven.

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

Antwoord 7, autoriteit 2%

Sorry voor het beantwoorden van een oudere, al beantwoorde vraag, maar ik dacht dat ik een paar redenen zou noemen waarom je jsfiddle niet werkt, voor het geval anderen het bekijken en zich afvragen waarom de pull-right-klasse zoals beschreven in de geaccepteerd antwoord werkt daar niet.

1. de url naar het bestand bootstrap.css is ongeldig. (misschien werkte het toen je de vraag stelde).
2. je moet het attribuut: type=”button” toevoegen aan je invoerelement, anders wordt het niet weergegeven als een knop – het wordt weergegeven als een invoervak. Beter nog, gebruik in plaats daarvan het element <button>.
3. Bovendien, omdat pull-right floats gebruikt, krijg je wat wankele knoppenlay-out omdat elke LI niet genoeg hoogte heeft om de hoogte van de knop te accommoderen. Het toevoegen van een regel-hoogte of min-hoogte css aan de LI zou dat verhelpen.

werkende viool: 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>

(Ik heb ook een minimale breedte aan de knoppen toegevoegd omdat ik het uiterlijk van een rafelige, rechts uitgelijnde look van de knoppen niet kon verdragen vanwege de verschillende breedtes 🙂 )

Antwoord 8

Het gebruik van de Bootstrap pull-right-helper werkte niet voor ons omdat het float: rightgebruikt, wat dwingt inline-blockelementen om blockte worden. En wanneer de .btn‘s blockworden, verliezen ze de natuurlijke marge die inline-blockhen bood als quasi-tekstuele elementen.

Dus in plaats daarvan gebruikten we direction: rtl;op het bovenliggende element, waardoor de tekst binnen dat element van rechts naar links wordt opgemaakt, en dat veroorzaakt inline-blockelementen ook van rechts naar links in te delen. U kunt MINDER als volgt gebruiken om te voorkomen dat kinderen ook rtlworden opgemaakt:

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

en gebruik het als:

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

Antwoord 9

In Bootstrap 4: probeer het op deze manier met Flexbox. Zie documentatie 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>

Antwoord 10

Pull right is afgeschreven vanaf v3.1.0 .
Even een waarschuwing.

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

Antwoord 11

Pas pull-rightklasse toe op de knop.
http://getbootstrap.com/css/#helper-classes-floats– > Helperklassen

Deze link zal helpen

Antwoord 12

Nu moet je .dropdown-menu-righttoevoegen aan het bestaande .dropdown-menuelement. pull-rightwordt niet meer ondersteund.

Meer info hier http://getbootstrap.com/components/#btn-dropdowns

Antwoord 13

Voor Bootstrap 5:

Documentatie: https://getbootstrap.com/docs/5.0/utilities/float/

gebruik .float-endin het element voor juiste uitlijning.
Mogelijk moet u .clearfixtoevoegen aan het bovenliggende element als u bijvoorbeeld een knop naar rechts verplaatst en niet wilt dat het volgende element omhoog schuift.

Antwoord 14

Kun je een aangepaste CSS proberen naast de bootstrap-CSS om te zien of er wijzigingen zijn. Probeer

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

Als het werkt, kun je proberen te manipuleren wat je hebt of andere opmaak hieraan toe te voegen en te bereiken wat je wilt. Omdat u bootstrap gebruikt, betekent dit niet dat als het u niet biedt wat u wilt, u het gewoon beheert. U werkt met uw codes en daarom beveelt u het te doen wat u zegt.
Proost!

Antwoord 15

je kunt ook lege kolommen gebruiken om links spaties te geven

vind ik leuk

<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 ::
Jsfiddle-demo

Antwoord 16

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

Eén manier zou zijn om deze stijl toe te passen op uw lijstitems om ze inline te houden

of

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

Antwoord 17

Van Bootstrap V3.3.1lost de volgende CSS-stijl dit probleem op

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

Opmerking: ik heb alle suggesties in bovenstaande berichten geprobeerd en alle hebben betrekking op oudere versies en bieden geen oplossing voor de bootstrap-versies van de nieuwe set.

Antwoord 18

Het probleem is dat u de knoppen gebruikt als onderdeel van uw lijsten. En omdat de verticale marge tussen lijstitems te laag is om de knoppen ertussen te plaatsen, rotzooit de uitlijningen. Ik zou een van de knoppen bovenop de lijst en een andere onder hen plaatsen, zodat het eruit zou zien als wat u verwacht!

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

Antwoord 19

<p align="right">
<button type="button" class="btn btn-primary">Submit</button>
</p>

Antwoord 20

Voor bootstrap 4 documentatie

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