142

Apa cara yang tepat bootstrapuntuk mengapung div ke kanan? Saya pikir pull-rightitu cara yang disarankan, tetapi tidak berhasil.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

Luaskan cuplikan

html css twitter-bootstrap Justin
sumber

Anda ingin mengapung teks ?? Lihatlah csstext-align

Ron van der Heijden

Apakah tidak ada cara build in (standar) di bootstrap?

Justin

stackoverflow.com/questions/12829608/…

Ron van der Heijden

85

Anda memiliki dua span6 div di dalam baris Anda sehingga akan mengambil seluruh 12 rentang yang terdiri dari satu baris.

Menambahkan pull-right ke span6 div kedua tidak akan melakukan apa-apa karena itu sudah duduk di sebelah kanan.

Jika Anda bermaksud ingin teks dalam span6 div kedua disejajarkan ke kanan maka sederhana tambahkan kelas baru ke div itu dan berikan teks-align: nilai yang benar misalnya

.myclass {
    text-align: right;
}

MEMPERBARUI:

EricFreese menunjukkan bahwa dalam rilis Bootstrap 2.3 (minggu lalu) mereka telah menambahkan kelas utilitas perataan teks yang dapat Anda gunakan:

.text-left
.text-center
.text-right

http://twitter.github.com/bootstrap/base-css.html#typography

Billy Moat
sumber

5

Terlihat seperti mereka menambahkan kelas utilitas untuk menyelaraskan teks dalam 2.3 : .text-left, .text-center, dan.text-right

Eric Freese

1

@EricFreese - Anda benar - tidak melihat pembaruan itu - Saya telah memperbarui jawaban saya.

Billy Moat

Ini seharusnya bukan jawaban yang diterima. Ada kelas bootstrap pull-rightbawaan bernama (credit to @Amit); IMO, lebih bersih menggunakan kelas Bootstrap bawaan ... dan OP menanyakan hal itu dalam pertanyaannya

Kolob Canyon

107

Untuk mengapung div ke kanan pull-rightadalah cara yang disarankan, saya merasa Anda melakukan hal-hal yang benar mungkin hanya perlu Anda gunakantext-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

Amit
sumber

unfrotfully pull-rightsudah ditinggalkan dengan versi 3.1: getbootstrap.com/components/#dropdowns-alignment

ılı

12

@ ılǝ "..kami sudah usang. hak-benar pada menu dropdown ." Ini tidak berlaku untuk penggunaan pull-right lainnya.

user2864740

78

bootstrap 3 memiliki kelas untuk menyelaraskan teks dalam div

<div class="text-right">

akan menyelaraskan teks di sebelah kanan

<div class="pull-right">

akan menarik ke kanan semua konten tidak hanya teks

ishimwe
sumber

text-right, text-leftdan text-centerbekerja dengan sempurna. Dan selaraskan teks dengan wadahnya.

Anish Nair

terima kasih @BojanKogoj, memang pull-right tidak digunakan lagi untuk menu dropdown di v 3.1: getbootstrap.com/components/#dropdowns-alignment

ılǝ

27

Caranya, tanpa perlu menambahkan gaya inline

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

Jawabannya ada di sarang orang lain <div>dengan kelas "tarik-kanan". Menggabungkan dua kelas tidak akan berhasil.

Bern
sumber

1

Ini seharusnya jawaban yang benar. Maksud Bootstrap adalah untuk menghindari keharusan berurusan dengan gaya secara langsung.

Kristen Waite

18

<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

Ini bekerja untuk saya.

edit: Contoh dengan cuplikan Anda:

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}

<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>

Luaskan cuplikan

Kévin Berthommier
sumber

3

Anda dapat menetapkan nama kelas seperti pusat teks, kiri atau kanan. Teks akan sesuai dengan nama kelas ini. Anda tidak perlu membuat nama kelas tambahan secara terpisah. Kelas-kelas ini dibangun di BootStrap 3 dan bootstrap 4.

Bootstrap 3

v3 Dokumen Alignment Teks

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

v4 Dokumen Alignment Teks

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

Faisal
sumber

Bootstrap Twitter float di sebelah kanan

Jawaban:

Bootstrap 3

Bootstrap 4