Bootstrap: Wyrównywanie dwóch przycisków w tym samym wierszu

Question

Zasadniczo to, co próbuję zrobić, aby uzyskać dwa przyciski po przeciwnej stronie witryny, ale w tym samym wierszu. Oto jak to wygląda:

A oto kod co mam:

   <div class="panel-footer"><!-- panel-footer --> 

       <div class="previous"> 
        <button type="button" class="btn btn-default btn-lg"> 
         <span class="glyphicon glyphicon-chevron-left"></span> 
        </button> 
       </div> 

       <div class="next"> 
        <button type="button" class="btn btn-default btn-lg"> 
         <span class="glyphicon glyphicon-chevron-right"></span> 
        </button> 
       </div> 

      </div><!-- end panel-footer --> 

A oto CSS dla klasy „poprzedni” i „następny”.

.previous { 
text-align: left; 
} 

.next { 
text-align: right; 
} 

Dzięki. Używam bootstrapu, jeśli to pomaga.

Answer 1

owinąć je w dwóch oddzielnych kolumnach tak:

<div class="panel-footer row"><!-- panel-footer --> 
    <div class="col-xs-6 text-left"> 
     <div class="previous"> 
      <button type="button" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
      </button> 
     </div> 
    </div> 
    <div class="col-xs-6 text-right"> 
     <div class="next"> 
      <button type="button" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
      </button> 
     </div> 
    </div> 
</div><!-- end panel-footer --> 

Nawiasem mówiąc, można użyć wbudowanego w klasach pomocniczych tekstu w lewo/w prawo tekstu jak robiłem na div kolumn więc nie trzeba dodawać dodatkowego css. W takim przypadku możesz usunąć dodatkowe elementy div, które dodałeś.

Answer 2

Musisz unieść elementy div zawierające przyciski po lewej i prawej stronie. Ponieważ używasz Bootstrap, zalecam używanie wbudowanych klas .pull-right i .pull-left.

Podaj poprzedni div klasę lewy-lewy i następny div klasę pull-right.

Być może trzeba będzie zrobić następny przycisk na pierwszym miejscu w swoim źródle HTML.

Można również po prostu dodać float: left; do istniejącej .previous klasy i float: right; do klasy .next.

Jeszcze lepiej, po prostu pozbyć się tych poprzednich/następnych elementów div i zastosować klasę pull-left/pull-right bezpośrednio do przycisków.

Answer 3

użyłbym pływak w css

.previous { 
float: left; 
} 

.next { 
float: right; 
} 

można przetestować tę opcję tutaj jsfiddle.

Answer 4

Myślałem, że Bootstrap automatycznie zrobi to unoszące się za Ciebie, jeśli opakujesz go w div .row, ponieważ opiera się na siatce?

<div class="row"> 
<div class="pull-left"> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </button> 
</div> 

<div class="pull-right"> 
    <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </button> 
</div> 
</div> 

Answer 5

Możesz wypróbować, co powiedział HaukurHaf, to zadziała. Prosta metoda pływająca.

Można również umieścić te dwa .previous i .next divs w .col- classes, a następnie zawinąć je w div rzędu. Tak byłoby przeczytać:

<div class="panel-footer"> 
<div class="row"> 
    <div class="col-xs-6 previous"> 
     <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     </button> 
    </div> 
    <div class="col-xs-6 next"> 
     <button type="button" class="btn btn-default btn-lg"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     </button> 
    </div> 
</div> 

ten sposób Państwa naśladują układu kolumn Bootstrap za.