Jak mogę wyrównać moje przyciski Bootstrap na Twitterze?

Mam tutaj prostą wersję 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>

Mam nieuporządkowaną listę i dla każdego elementu listy chcę mieć tekst po lewej, a następnie przycisk wyrównany do prawej. Próbowałem użyć metody „pull-right”, ale to całkowicie popsuło wyrównanie. Co ja robię źle?

Wstaw pull-rightdo atrybutu class i pozwól bootstrapowi ułożyć przyciski.

W przypadku Bootstrap 2.3 zobacz: http://getbootstrap.com/2.3.2/components.html#misc > Klasy pomocnicze> .pull-right.

W przypadku Bootstrap 3 zobacz: https://getbootstrap.com/docs/3.3/css/#helper-classes > Klasy pomocników.

W przypadku Bootstrap 4 zobacz: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

pull-rightPolecenie zostało usunięte i zastąpione float-rightlub ogólniefloat-{sm,md,lg,xl}-{left,right,none}

W twitter bootstrap 3 wypróbuj klasę pull-right

class="btn pull-right"

Klasa „pull-right” może być niewłaściwa, ponieważ w zastosowaniach „float: right” zamiast text-align.

Sprawdzając plik css bootstrap 3, znalazłem w linii 457 klasę „text-right”. Ta klasa powinna być właściwym sposobem wyrównania tekstu do prawej.

Jakiś kod:

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

Aktualizacja 2019 - Bootstrap 4.0.0

pull-rightKlasa jest teraz float-rightw 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

Lepiej też nie wyrównywać listy ul i używać elementów blokowych dla wierszy.

Czy float-rightnadal nie działa?

Pamiętaj, że Bootstrap 4 to teraz Flexbox , a wiele elementów display:flexmoże uniemożliwić poprawne działanie float-right. W niektórych przypadkach klasy use align-self-endlub ml-autodziałają w celu wyrównania elementów znajdujących się wewnątrz kontenera Flexbox, takich jak Bootstrap 4 .row, Card lub Nav.

Pamiętaj również, że text-rightnadal działa na elementach wbudowanych.

Bootstrap 4 wyrównuje właściwe przykłady

Bootstrap 3

Skorzystaj z pull-rightklasy.

Użyj buttontagu zamiast inputi użyj pull-rightklasy.

pull-right klasa całkowicie popsuła oba przyciski, ale można to naprawić, definiując niestandardowy margines po prawej stronie.

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

Następnie użyj następującego CSS dla klasy

.RbtnMargin { margin-left: 5px; }

Dodając do zaakceptowanej odpowiedzi, kiedy pracuję w kontenerach i kolumnach, które mają wbudowane wypełnienie z bootstrapu, czasami mam pełną rozciągniętą kolumnę z dzieckiem div, który robi to, co trzeba.

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

Alternatywnie, dodaj wszystkie kolumny do całkowitej liczby kolumn siatki (domyślnie 12) wraz z przesunięciem pierwszej kolumny.

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

Przepraszam, że odpowiadam na starsze już udzielone pytanie, ale pomyślałem, że wskazuję kilka powodów, dla których twój jsfiddle nie działa, na wypadek, gdyby inni to sprawdzili i zastanawiają się, dlaczego klasa pull-right opisana w zaakceptowanej odpowiedzi nie działa tam nie pracuje.

1. adres URL pliku bootstrap.css jest nieprawidłowy. (być może zadziałało, kiedy zadałeś pytanie).
2. powinieneś dodać atrybut: type = "button" do elementu wejściowego, w przeciwnym razie nie będzie renderowany jako przycisk - zostanie wyrenderowany jako pole wprowadzania. Jeszcze lepiej, <button>zamiast tego użyj elementu.
3. Dodatkowo, ponieważ funkcja „pull-right” używa pływaków, otrzymasz pewne rozłożenie układu przycisków, ponieważ każdy LI nie ma wystarczającej wysokości, aby pomieścić wysokość przycisku. Dodanie css o wysokości linii lub minimalnej wysokości do LI rozwiązałoby ten problem.

działające skrzypce: 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>

(Dodałem również minimalną szerokość do przycisków, ponieważ nie mogłem znieść wyglądu nierównego, wyrównanego do prawej strony wyglądu z powodu różnych szerokości :))

Korzystanie z pull-rightpomocnika Bootstrap nie działało dla nas, ponieważ używa float: right, które zmusza inline-blockelementy do stania sięblock . A kiedy .btnstają się block, tracą naturalny margines, który inline-blockzapewniał im jako elementy quasi-tekstowe.

Zamiast tego zastosowaliśmy direction: rtl;element nadrzędny, który powoduje, że tekst wewnątrz tego elementu układa się od prawej do lewej, a także powoduje inline-blockukład elementów od prawej do lewej. Możesz użyć LESS w następujący sposób, aby zapobiec układaniu się dzieci rtl:

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

  * {
    direction: ltr;
  }
}

i używaj go w następujący sposób:

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

W Bootstrap 4 : Wypróbuj w ten sposób z Flexbox. Zobacz dokumentację w 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>

Wyciągnięcie w prawo zostało amortyzowane od wersji 3.1.0. Tylko jedna głowa do góry.

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

Zastosować pull-right klasę dla przycisku. http://getbootstrap.com/css/#helper-classes-floats -> Klasy pomocnicze

Ten link pomoże

Teraz musisz dodać .dropdown-menu-prawo do istniejącego elementu .dropdown-menu. funkcja „pull-right” nie jest już obsługiwana. Więcej informacji tutaj http://getbootstrap.com/components/#btn-dropdowns

Czy możesz wypróbować niestandardowy CSS z boku CSS ładowania początkowego, aby sprawdzić, czy jakieś zmiany. Próbować

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

Jeśli to działa, możesz spróbować manipulować tym, co masz lub dodać do tego inne formatowanie i osiągnąć to, czego chcesz. Ponieważ używasz bootstrapu, nie znaczy to, że jeśli nie oferuje ci tego, czego chcesz, to po prostu nim zarządzasz. Pracujesz ze swoimi kodami, więc nakazujesz mu robić to, co mówisz. Twoje zdrowie!

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

właśnie użyłem układu .. zastosuj style dla li ..

lub

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

w CSS

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

możesz również użyć pustych kolumn, aby podać spacje po lewej stronie

lubić

<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

Począwszy od wersji Bootstrap 3.3.1, ten styl CSS rozwiąże ten problem

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

Uwaga: wypróbowałem wszystkie sugestie w powyższych postach i wszystkie adresy starszych wersji i nie zapewniam poprawki do nowych wersji bootstrap.

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