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


452

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?


5
Mengapa pertanyaan ini ditandai dengan twitter-bootstrap-3 dan twitter-bootstrap-2 serta twitter-bootstrap ?
Andrew Grimm

5
Karena ini relevan untuk semua versi sejak 3/2013
Zim

Jawaban:


693

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}


18
Saya tidak mengerti jawaban ini. Dalam pertanyaan, kode contoh sudah digunakan pull-right.
Persaingan

@guival Saya bertanya-tanya hal yang sama. stackoverflow.com/a/26546770/470749 menyiratkan bahwa menggunakan buttonbukannya inputakan membuat perbedaan.
Ryan

@ Ryan ini bekerja pada saya, baik dalam input dan tombol
Lesther

@aronadaal Ini bekerja untuk saya, terima kasih!
Houari Zegai

249

Di twitter bootstrap 3 coba kelas tarik-kanan

class="btn pull-right"

4
Tidak lagi, itu sudah ditinggalkan pada v 3.1: getbootstrap.com/components/#dropdowns-alignment
ılǝ

9
+1 untuk menyoroti perubahan. Tetapi penyusutan itu hanya untuk menu drop down yang telah diganti dengan .dropdown-menu-right. Ini belum ditinggalkan secara keseluruhan.
Shawn Vader

Anda benar, kata dokumentasiwe've deprecated .pull-right on dropdown menus
ılǝ

3
Saya harus menggunakan pull-right di div btn-group luar: <div class = "btn-group pull-right">
Gerfried

17
pull-rightmenggunakan float: right, dengan demikian menciutkan konten vertikal di atas satu sama lain. Bungkus tombol dengan text-rightDIV seperti ini -<div class="text-right">button...</div>
hashbrown

137

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>


6
Saya pikir ini lebih baik daripada pull-right karena mencegah konten vertikal runtuh di atas satu sama lain dan menghindari harus menambahkan lebih banyak mark-up hanya untuk mengatasinya.
Tony Wall

2
Terima kasih. Masalah dengan "pull-right" adalah ia menghilangkan margin dari tombol. Ini mempertahankan margin tetapi menggerakkan elemen ke kanan. Sempurna!
PR Whitehead

Mengapa teks-kanan harus di div containg tombol ini, bukan hanya class="btn btn-default text-right"di tombol ???
Krystian Polska

50

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.


Mereka bekerja untuk saya, tetapi Anda tidak perlu bergantung pada tautan. Baca jawaban untuk penjelasan tentang cara menyelaraskan ke kanan.
Zim

19

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

18

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>

12

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


11

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>

7

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>




2

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!


5
tidak perlu untuk custom css, karena jawaban lain menunjukkan semua yang diperlukan termasuk dalam bootstrap
chrisweb

@chrisweb Bagaimana jika Anda memiliki beberapa plugin lain yang berbagi kelas CSS yang sama yang tidak diketahui oleh Anda dan masalah yang bertentangan, apa yang Anda lakukan? Duduk dan tonton daripada membuat css khusus dan lanjutkan? OP tidak pernah menentukan jika ada plugin lain yang ditambahkan yang mungkin berbagi kelas css yang sama.
OmniPotens

2
<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;
}

Bagi saya ini menempatkan kedua item daftar pada satu baris
deltanovember

2

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


1

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.


-1

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>

Apa hubungannya ini dengan menyelaraskan kanan dan tombol?
Zim
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.