2017-02-24 36 views
8

2 cols ile bir satır oluşturmaya çalışıyorum. İçleri sola hizalı olan soldan bir sütun ve içeriğiyle birlikte ikinci sütun sağa yaslı (eski çekme hakkı).Bootstrap 4: sağa hizala

Bunu alpha-6'da nasıl yaparım?

Birkaç şey denedim, ancak şu ana kadar sahip olduğum şey bu. Neyi kaçırıyorum? satır içi elemanları

<div class="row"> 
    <div class="col">left</div> 
    <div class="col ml-auto">content needs to be right aligned</div> 
</div> 

cevap

15
blok elemanları

kullanın float-right veya text-right: çalışmıyor

<div class="row"> 
    <div class="col">left</div> 
    <div class="col text-right">inline content needs to be right aligned</div> 
</div> 
<div class="row"> 
     <div class="col">left</div> 
     <div class="col"> 
      <div class="float-right">element needs to be right aligned</div> 
     </div> 
</div> 

http://www.codeply.com/go/oPTBdCw1JV

float-right iseBootstrap 4 şimdi olduğunu unutmayın flexbox ve birçok Öğeler, float-right'un çalışmasını engelleyebilecek display:flex şeklindedir. align-self-end veya ml-auto çalışması gibi bazı durumlarda

, yardımcı sınıfları doğru özyükleme 4 .Row, kart veya NAV gibi FlexBox kap içinde bulunan öğeleri hizalayın. ml-auto (kenar boşluk: otomatik) öğeleri bir sağ kutuya itmek için bir esnek kutu öğesinde kullanılır.

<div class="row"> 
    <div class="col-md-6">left</div> 
    <div class="col-md-push-6">content needs to be right aligned</div> 
</div> 

Docs

+0

ahhh, ben denemiş şamandıra-hakkına ama col kendisinde, karışık olduğunu vardı: belgelerine

Bootstrap 4 align right examples

Thibs

1

, onu seversiniz. Teşekkür ederim!