Bootstrap 3 użyj "btn-group" i wyrównaj

Question

Doceniam nowy Bootstrap 3, ale ... Stworzyłem tabelę z 5 kolumnami. Ostatnie 3 kolumny zawierają 2 x 'a href' i 1 x 'formularz', ale każdy pracuje jako przycisk o wielkości 30 x 30. Formularz był największym problemem, ponieważ jest to element blokowy i chciałem wszystkie przyciski obok siebie w jednej linii.

Więc moje rozwiązanie do tej pory:

<table> 
<tr> 
    <td colspan="3"> 
    <div class="btn-toolbar"> 
    <div class="btn-group"> Link 1 </div> 
    <div class="btn-group"> Link 2 </div> 
    <div class="btn-group"> Form 1 </div> 
    </div> 

to działa świetnie. Ale chcę ustawić te 3 obiekty po prawej stronie mojej komórki. Nie ma sposobu, aby znaleźć wyrównanie to dobrze.

<div class="btn-toolbar text-right"> 

Nie działają!

<tr colspan="3" class="text-right"> 

Nie działają!

<div class="btn-toolbar pull-right"> 

Działa!

Ale czuję się naprawdę niepewnie, czy to jest właściwa droga. Dla mnie jest to dużo zagnieżdżonego kodu.

Czy istnieje sposób rozwiązania tego problemu przy użyciu mniejszej ilości kodu?

Answer 1

Nie ma nic złego w korzystaniu z pull-right, aby osiągnąć to, czego potrzebujesz.

<h2>Stock Management</h2> 
<hr/> 
<div class='btn-group pull-right'> 
    <a href='#' class='btn btn-default'>Add New Product</a> 
    <a href='#' class='btn btn-info'>Supplier List</a> 
    <a href='#' class='btn btn-danger'>Stock Alerts</a> 
</div> 
<div class='clearfix'></div> 
<hr/> 

Będziesz po prostu wymagają div z klasą clearfix potem w przeciwnym razie może mieć problemy z nakładających się na siebie.

Uwaga od docs bootstrapowych dotyczących użycia klasy pull-right w rozwijanych menu:

Przestarzałe .pull prawym wyrównanie

Począwszy od v3.1.0, mamy przestarzałe .pull-prawo w menu rozwijanych. Aby wyrównać menu, użyj polecenia .dropdown-menu-right. Prawe wyrównane komponenty nawigacyjne w pasku nawigacyjnym używają tej klasy w wersji mixin do automatycznego wyrównania menu. Aby go zastąpić, użyj .dropdown-menu-left.

PS - Nie używaj stołów do NIKTÓW innych niż wyświetlanie danych. Ten rodzaj projektowania stron internetowych powinien zostać pozostawiony w 1998 roku: P

Answer 2

Sprawdź, czy to rozwiąże twój cel. Dodałem trochę CSS do istniejącego kodu

<style type="text/css"> 
    .btn-group{ 
     display: inline-block;   
     text-align:right; 
    } 
    </style> 

HTML jest takie same

<table> 
    <tr> 
     <td colspan="3"> 
      <div class="btn-toolbar"> 
       <div class="btn-group"> Link 1 </div> 
        <div class="btn-group"> Link 2 </div> 
        <div class="btn-group"> Form 1 </div>  
      </div>