Mam tutaj prostą wersję demo:
<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?
twitter-bootstrap
twitter-bootstrap-3
bootstrap-4
twitter-bootstrap-2
deltanovember
źródło
źródło
Odpowiedzi:
Wstaw
pull-right
do 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-right
Polecenie zostało usunięte i zastąpionefloat-right
lub ogólniefloat-{sm,md,lg,xl}-{left,right,none}
źródło
pull-right
.button
zamiastinput
spowoduje różnicę.W twitter bootstrap 3 wypróbuj klasę pull-right
źródło
we've deprecated .pull-right on dropdown menus
pull-right
używafloat: right
, tym samym zwijając pionową zawartość jedna na drugiej. Zawiń przycisktext-right
DIV w ten sposób -<div class="text-right">button...</div>
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:
źródło
class="btn btn-default text-right"
w przycisku?Aktualizacja 2019 - Bootstrap 4.0.0
pull-right
Klasa jest terazfloat-right
w Bootstrap 4 ...http://www.codeply.com/go/nTobetXAwb
Lepiej też nie wyrównywać listy ul i używać elementów blokowych dla wierszy.
Czy
float-right
nadal nie działa?Pamiętaj, że Bootstrap 4 to teraz Flexbox , a wiele elementów
display:flex
może uniemożliwić poprawne działanie float-right. W niektórych przypadkach klasy usealign-self-end
lubml-auto
dział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-right
nadal działa na elementach wbudowanych.Bootstrap 4 wyrównuje właściwe przykłady
Bootstrap 3
Skorzystaj z
pull-right
klasy.źródło
Użyj
button
tagu zamiastinput
i użyjpull-right
klasy.pull-right
klasa całkowicie popsuła oba przyciski, ale można to naprawić, definiując niestandardowy margines po prawej stronie.Następnie użyj następującego CSS dla klasy
źródło
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.
Alternatywnie, dodaj wszystkie kolumny do całkowitej liczby kolumn siatki (domyślnie 12) wraz z przesunięciem pierwszej kolumny.
źródło
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.
<button>
zamiast tego użyj elementu.działające skrzypce: http://jsfiddle.net/3ejqufp6/
(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 :))
źródło
Korzystanie z
pull-right
pomocnika Bootstrap nie działało dla nas, ponieważ używafloat: right
, które zmuszainline-block
elementy do stania sięblock
. A kiedy.btn
stają sięblock
, tracą naturalny margines, któryinline-block
zapewniał 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 powodujeinline-block
układ elementów od prawej do lewej. Możesz użyć LESS w następujący sposób, aby zapobiec układaniu się dziecirtl
:i używaj go w następujący sposób:
źródło
W Bootstrap 4 : Wypróbuj w ten sposób z Flexbox. Zobacz dokumentację w getbootstrap
źródło
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
źródło
pull-right
jest przestarzałe w dniudropdown-menu
. Nadal można go używać do innych komponentów.Zastosować
pull-right
klasę dla przycisku. http://getbootstrap.com/css/#helper-classes-floats -> Klasy pomocniczeTen link pomoże
źródło
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
źródło
Czy możesz wypróbować niestandardowy CSS z boku CSS ładowania początkowego, aby sprawdzić, czy jakieś zmiany. Próbować
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!
źródło
właśnie użyłem układu .. zastosuj style dla li ..
lub
w CSS
źródło
możesz również użyć pustych kolumn, aby podać spacje po lewej stronie
lubić
Demo :: Jsfiddle demo
źródło
Począwszy od wersji Bootstrap 3.3.1, ten styl CSS rozwiąże ten problem
Uwaga: wypróbowałem wszystkie sugestie w powyższych postach i wszystkie adresy starszych wersji i nie zapewniam poprawki do nowych wersji bootstrap.
źródło
dla dokumentacji bootstrap 4
źródło