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

452

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?

deltanovember
źródło
5
Dlaczego to pytanie jest oznaczone jako twitter-bootstrap-3 i twitter-bootstrap-2, a także twitter-bootstrap ?
Andrew Grimm,
5
Ponieważ dotyczy wszystkich wersji od 3/2013
Zim

Odpowiedzi:

692

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}

aronadaal
źródło
18
Nie rozumiem tej odpowiedzi. W pytaniu przykładowy kod już używa pull-right.
gitarzysta
@guival Zastanawiałem się nad tym samym. stackoverflow.com/a/26546770/470749 oznacza, że ​​użycie buttonzamiast inputspowoduje różnicę.
Ryan
@ Ryan to działa na mnie, zarówno na wejściu, jak i na przycisk
Lesther
@aronadaal To dla mnie praca, dziękuję!
Houari Zegai
249

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

class="btn pull-right"
Shawn Vader
źródło
4
Już nie został wycofany z v 3.1: getbootstrap.com/components/#dropdowns-alignment
ılǝ
9
+1 za wyróżnienie zmiany. Ale ta amortyzacja dotyczy tylko menu rozwijanego, które zostało zastąpione przez .dropdown-menu-right. Nie został on przestarzały jako całość.
Shawn Vader,
masz rację, dokumentacja mówiwe've deprecated .pull-right on dropdown menus
18
3
Musiałem użyć pull-right w zewnętrznej div btn-group div: <div class = "btn-group pull-right">
Gerfried
17
pull-rightużywa float: right, tym samym zwijając pionową zawartość jedna na drugiej. Zawiń przycisk text-rightDIV w ten sposób -<div class="text-right">button...</div>
hashbrown
137

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>

César León
źródło
6
Wydaje mi się, że jest to lepsze niż funkcja „przeciągnij w prawo”, ponieważ zapobiega zawalaniu się zawartości pionowej jedna na drugiej i pozwala uniknąć dodawania znaczników tylko w celu obejścia tego problemu.
Tony Wall
2
Dziękuję Ci. Problem z „pull-right” polega na tym, że usuwa on marginesy z przycisków. Utrzymuje to marginesy, ale przesuwa elementy w prawo. Doskonały!
PR Whitehead
Dlaczego tekst-prawo musi być w div zawierający ten przycisk zamiast tylko class="btn btn-default text-right"w przycisku?
Krystian Polska
50

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.

Zim
źródło
Pracują dla mnie, ale nie powinieneś polegać na linkach. Przeczytaj odpowiedź na wyjaśnienie, jak wyrównać do prawej.
Zim
19

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; }
Shehzad Mehmood
źródło
18

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>
yuvilio
źródło
12

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

Allan Nienhuis
źródło
11

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>
Carl G.
źródło
7

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>
Shahriyar Ahmed
źródło
2

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!

OmniPotens
źródło
5
nie ma potrzeby niestandardowego css, ponieważ druga odpowiedź pokazuje, że wszystko, co potrzebne, znajduje się w bootstrapie
chrisweb
@chrisweb Co zrobić, jeśli masz inne wtyczki, które dzielą tę samą klasę CSS, która jest nieznana i występują w konflikcie, co robisz? Siedzieć i oglądać niż utworzyć niestandardowy css i przejść dalej? OP nigdy nie określił, czy zostały dodane inne wtyczki, które mogą dzielić te same klasy css.
OmniPotens
2
<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;
}
sasi
źródło
Dla mnie to umieszcza oba elementy listy w jednym wierszu
deltanovember
2

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

użytkownik889030
źródło
1

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.

Uri Lukach
źródło
-1

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>
Włodzimierz Pietrow
źródło
Co to ma wspólnego z wyrównaniem do prawej i przycisków?
Zim