Twitter Bootstrap düğmelerimin doğru hizalanmasını nasıl sağlayabilirim?

Burada basit bir demom var:

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>

Sırasız bir listem var ve her liste öğesi için önce sola ve sonra sağa hizalı bir düğmeye sahip olmak istiyorum. Sağa çekmeyi kullanmaya çalıştım, ancak bu tamamen hizalamayı bozuyor. Neyi yanlış yapıyorum?

pull-rightClass özniteliğine ekleyin ve bootstrap'in düğmeleri düzenlemesine izin verin.

İçin Bootstrap 2.3 , bkz: http://getbootstrap.com/2.3.2/components.html#misc > Yardımcı sınıflar> .pull sağ.

İçin Bootstrap 3 , bkz: https://getbootstrap.com/docs/3.3/css/#helper-classes > Yardımcı sınıflar.

İçin Bootstrap 4 , bkz: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

pull-rightKomut çıkarıldı ve ile ikame edilmiş float-rightya da, genel olarakfloat-{sm,md,lg,xl}-{left,right,none}

Twitter bootstrap 3'te sınıfı sağa deneyin

class="btn pull-right"

"pull-right" sınıfı doğru yol olmayabilir, çünkü metin hizalama yerine "float: right" kullanır.

Bootstrap 3 css dosyasını kontrol ederek 457 satırında "text-right" sınıfını buldum. Bu sınıf, metni sağa hizalamak için doğru yol olmalıdır.

Bazı kodlar:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Güncelleme 2019 - Bootstrap 4.0.0

pull-rightSınıf artık float-rightBootstrap 4'te ...

    <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

Ayrıca ul listesini hizalamamak ve satırlar için blok öğeleri kullanmak daha iyidir.

Is float-righthala çalışmıyor?

Bootstrap 4'ün artık flexbox olduğunu ve display:flexşamandıra hakkının çalışmasını engelleyebilecek birçok öğe olduğunu unutmayın . Bazı durumlarda, util sınıfları , Bootstrap 4.row, Card veya Nav gibi bir flexbox kabındaki öğeleri hizalamak align-self-endveya ml-autobu hizalamaya çalışmak için çalışır.

Ayrıca text-right, satır içi öğelerde hala çalıştığını unutmayın .

Bootstrap 4 doğru örnekleri hizala

Önyükleme 3

pull-rightSınıfı kullanın .

Kullanım buttonetiketi yerine inputve kullanım pull-rightsınıfı.

pull-right class, her iki düğmenizi de tamamen karıştırır, ancak sağ tarafta özel kenar boşluğu tanımlayarak bunu düzeltebilirsiniz.

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

Ardından sınıf için aşağıdaki CSS'yi kullanın

.RbtnMargin { margin-left: 5px; }

Kabul edilen cevaba ek olarak, bootstrap'tan dolgu yapan kaplar ve sütunlar içinde çalışırken, bazen gitmek için yol çeken bir çocuk div ile tam gerilmiş bir sütun var.

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

Alternatif olarak, tüm sütunlarınızın, ilk sütunun kaydırılmasıyla birlikte toplam ızgara sütunu sayısına (varsayılan olarak 12) kadar eklenmesini sağlayın.

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

Daha önce cevaplanmış daha eski bir soruya cevap verdiğim için üzgünüm, ancak başkalarının kontrol etmesi ve kabul edilen cevapta açıklanan çekme sınıfının neden çalışmadığını merak etmesi durumunda jsfiddle'ınızın çalışmadığına dair birkaç nedenden bahsettiğimi düşündüm. Orada çalışmıyor.

1. bootstrap.css dosyasının URL'si geçersiz. (belki soruyu sorduğunuzda işe yaradı).
2. giriş öğenize: type = "button" niteliğini eklemeniz gerekir, aksi takdirde düğme olarak görüntülenmez - giriş kutusu olarak işlenir. Daha da iyisi, <button>bunun yerine elemanı kullanın.
3. Ayrıca, sağa doğru çekme özelliği kullandığından, her bir LI'nin düğmenin yüksekliğini karşılamak için yeterli yüksekliğe sahip olmadığı için düğme düzeninde biraz şaşırtma elde edersiniz. LI'ye bir satır yüksekliği veya minimum yükseklik css eklemek bunu ele alır.

çalışan keman: 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>

(Düğmelere min-genişlik de ekledim, çünkü değişen genişlikler nedeniyle düğmelere düzensiz sağa dayalı bir görünümün görünümünü tutamadım :))

Bootstrap Kullanılması pull-rightkullandığı çünkü yardımcı bizim için işe yaramadı float: right, hangi güçler inline-blockhaline elemanlarıblock . Ve .btns olduğunda, onlara yarı metinsel unsurlar olarak sağlayan blockdoğal marjı kaybederler inline-block.

Bunun yerine direction: rtl;, üst öğede kullandık, bu da öğenin içindeki metnin sağdan sola yerleşmesine ve inline-blocköğelerin de sağdan sola yerleşmesine neden oluyor . Çocukların da düzenlenmesini önlemek için LESS'i aşağıdaki gibi kullanabilirsiniz rtl:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

ve şöyle kullanın:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

In Bootstrap 4 : flexbox'a ile bu şekilde deneyin. Getbootstrap içindeki belgelere bakın

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

Sağa çekme v3.1.0 itibariyle amortismana tabi tutuldu. Sadece aklınızda bulunsun.

http://getbootstrap.com/components/#callout-dropdown-pull-right

pull-rightDüğme için sınıf uygulayın . http://getbootstrap.com/css/#helper-classes-floats -> Yardımcı sınıflar

Bu bağlantı yardımcı olacak

Şimdi mevcut .dropdown menü öğesine .dropdown-menu-right eklemeniz gerekiyor. sağa çekme artık desteklenmemektedir. Burada daha fazla bilgi http://getbootstrap.com/components/#btn-dropdowns

Herhangi bir değişiklik olup olmadığını görmek için önyükleme CSS'sini bir kenara özel bir CSS deneyebilir misiniz? Deneyin

.move-rigth{
    display: block;
    float: right;
}

Çalışıyorsa, sahip olduklarınızı manipüle etmeyi veya buna başka biçimlendirme eklemeyi ve istediğinizi gerçekleştirmeyi deneyebilirsiniz. Bootstrap kullandığınız için size istediğinizi sunmuyorsa, o zaman sadece yönetirsiniz. Kodlarınızla çalışıyorsunuz ve böylece söylediğiniz gibi komut vermeniz gerekiyor. Şerefe!

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

Ben sadece düzeni kullanılır .. li için stilleri uygulayın ..

veya

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

CSS'de

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

solda boşluk bırakmak için boş sütunlar da kullanabilirsiniz

sevmek

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

Gösteri :: Jsfiddle demosu

Gönderen Bootstrap V3.3.1 aşağıdaki CSS stil bu sorunu çözecektir

.modal-open{
    padding-right: 0 !important;
}

Not: Yukarıdaki gönderilerdeki tüm önerileri denedim ve tüm eski sürümleri ele aldım ve yeni önyükleme önyükleme sürümleri için bir düzeltme sağlamıyorum.

bootstrap 4 belgeleri için

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