Bagaimana saya bisa mendapatkan tombol Bootstrap Twitter saya untuk menyelaraskan dengan benar?

Saya punya demo sederhana di sini:

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>

Saya memiliki daftar tidak berurutan dan untuk setiap item daftar saya ingin memiliki teks di sebelah kiri dan kemudian tombol rata kanan. Saya telah mencoba menggunakan pull-right tetapi ini benar-benar mengacaukan perataan. Apa yang saya lakukan salah?

Masukkan pull-rightke dalam atribut kelas dan biarkan bootstrap mengatur tombol.

Untuk Bootstrap 2.3 , lihat: http://getbootstrap.com/2.3.2/components.html#misc > Kelas pembantu> .pull-right.

Untuk Bootstrap 3 , lihat: https://getbootstrap.com/docs/3.3/css/#helper-classes > Kelas pembantu.

Untuk Bootstrap 4 , lihat: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

The pull-rightperintah telah dihapus dan diganti dengan float-rightatau untuk umumfloat-{sm,md,lg,xl}-{left,right,none}

Di twitter bootstrap 3 coba kelas tarik-kanan

class="btn pull-right"

Kelas "pull-right" mungkin bukan jalan yang benar karena dalam menggunakan "float: right" alih-alih text-align.

Memeriksa file bootstrap 3 css saya menemukan kelas "teks-kanan" pada baris 457. Kelas ini harus menjadi cara yang tepat untuk menyelaraskan teks ke kanan.

Beberapa kode:

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

Pembaruan 2019 - Bootstrap 4.0.0

The pull-rightkelas sekarang float-rightdi Bootstrap 4 ...

    <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

Lebih baik tidak menyelaraskan daftar ul dan menggunakan elemen blok untuk baris.

Apakah float-rightmasih belum berfungsi?

Ingat bahwa Bootstrap 4 sekarang adalah flexbox , dan banyak elemen display:flexyang dapat mencegah float-right bekerja. Dalam beberapa kasus, kelas util suka align-self-endatau ml-autobekerja untuk meluruskan elemen yang ada di dalam wadah flexbox seperti Bootstrap 4 .row, Card atau Nav.

Ingat juga bahwa text-rightmasih berfungsi pada elemen sebaris.

Bootstrap 4 menyelaraskan contoh yang benar

Bootstrap 3

Gunakan pull-rightkelas.

Gunakan buttontag sebagai ganti inputdan gunakan pull-rightkelas.

pull-right kelas benar-benar mengacaukan kedua tombol Anda, tetapi Anda dapat memperbaikinya dengan mendefinisikan margin khusus di sisi kanan.

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

Kemudian gunakan CSS berikut untuk kelas

.RbtnMargin { margin-left: 5px; }

Menambah jawaban yang diterima, ketika bekerja di dalam wadah dan kolom yang telah dibangun di padding dari bootstrap, saya kadang-kadang memiliki kolom penuh dengan div anak yang melakukan penarikan menjadi cara untuk pergi.

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

Sebagai alternatif, minta semua kolom Anda menambahkan hingga jumlah total kolom kotak Anda (12 secara default) bersamaan dengan penggantian kolom pertama.

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

Maaf untuk menjawab pertanyaan yang sudah lebih lama dijawab, tapi saya pikir saya akan menunjukkan beberapa alasan bahwa jsfiddle Anda tidak berfungsi, kalau-kalau orang lain memeriksanya dan bertanya-tanya mengapa kelas tarik-kanan seperti yang dijelaskan dalam jawaban yang diterima tidak bekerja di sana.

1. url ke file bootstrap.css tidak valid. (mungkin berhasil ketika Anda mengajukan pertanyaan).
2. Anda harus menambahkan atribut: type = "button" ke elemen input Anda, atau itu tidak akan dirender sebagai tombol - itu akan diberikan sebagai kotak input. Lebih baik lagi, gunakan <button>elemen sebagai gantinya.
3. Selain itu, karena pull-right menggunakan float, Anda akan mendapatkan beberapa kejutan dari tata letak tombol karena setiap LI tidak memiliki ketinggian yang cukup untuk mengakomodasi ketinggian tombol. Menambahkan beberapa line-height atau min-height css ke LI akan mengatasinya.

working fiddle: 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>

(Saya juga menambahkan min-width ke tombol karena saya tidak tahan dengan tampilan yang benar-benar dibenarkan ke tombol karena lebar yang bervariasi :))

Menggunakan pull-rightpembantu Bootstrap tidak berhasil bagi kami karena menggunakan float: right, yang memaksa inline-blockelemen untuk menjadiblock . Dan ketika .btnmenjadi block, mereka kehilangan margin alami yang inline-blockmenyediakan mereka sebagai elemen kuasi-tekstual.

Jadi alih-alih, kami menggunakan direction: rtl;elemen induk, yang menyebabkan teks di dalam elemen tersebut menjadi tata letak dari kanan ke kiri, dan yang menyebabkan inline-blockelemen tata letak dari kanan ke kiri juga. Anda dapat menggunakan KURANG seperti yang berikut ini untuk mencegah anak-anak menjadi tidak ramah rtljuga:

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

  * {
    direction: ltr;
  }
}

dan gunakan seperti:

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

Di Bootstrap 4 : Coba cara ini dengan Flexbox. Lihat dokumentasi di getbootstrap

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

Tarik kanan disusutkan pada v3.1.0. Hanya kepala.

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

Terapkan pull-rightkelas untuk tombol. http://getbootstrap.com/css/#helper-classes-floats -> Kelas pembantu

Tautan ini akan membantu

Sekarang Anda perlu menambahkan .dropdown-menu-right ke elemen .dropdown-menu yang ada. tarik-kanan tidak didukung lagi. Info lebih lanjut di sini http://getbootstrap.com/components/#btn-dropdowns

Dapatkah Anda mencoba CSS khusus selain CSS bootstrap untuk melihat apakah ada perubahan. Mencoba

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

Jika berhasil maka Anda dapat mencoba memanipulasi apa yang Anda miliki atau menambahkan format lain untuk ini dan mencapai apa yang Anda inginkan. Karena Anda menggunakan bootstrap tidak berarti jika itu tidak menawarkan apa yang Anda inginkan, maka Anda hanya mengaturnya. Anda bekerja dengan kode Anda dan Anda memerintahkannya untuk melakukan apa yang Anda katakan. Bersulang!

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

saya hanya menggunakan tata letak .. menerapkan gaya untuk li ..

atau

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

dalam CSS

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

Anda juga dapat menggunakan kolom kosong untuk memberi spasi di sebelah kiri

Suka

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

Demo :: demo Jsfiddle

Dari Bootstrap V3.3.1 gaya CSS berikut akan menyelesaikan masalah ini

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

Catatan: Saya mencoba semua saran di posting di atas dan semua alamat versi yang lebih lama dan tidak memberikan perbaikan untuk mengatur versi bootstrap.

untuk dokumentasi bootstrap 4

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