Menyelaraskan div tepat di Bootstrap 3

Apakah ada cara di Bootstrap 3 untuk menyelaraskan tepat div?

Saya sadar mengimbangi possibilitys tapi aku ingin menyelaraskan diformat div ke kanan dari wadah sementara itu harus berpusat di fullwidth tampilan mobile. Kelas 'pull-right' tidak bekerja lagi. Apakah mereka lupa untuk menggantinya atau aku kehilangan sesuatu yang jelas?

<div class="row">
  <div class="container">
    <div class="col-md-4">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4">
      <!-- The next div has a background color and its own paddings and should be aligned right-->
      <!-- It is now in the right column but aligned left in that column -->
      <div class="yellow_background">right content</div>
    </div>
  </div>
</div>

Shure aku tahu bagaimana untuk melakukan hal ini di CSS, tapi hal itu dapat dilakukan di murni bootstrap 3?

xnome
Pertanyaan edit 3 November 2013 в 9:37
Pemrograman
html css twitter-bootstrap-3
3 November 2013 в 9:24
23 tayangan
Mengomentari pertanyaan (1)

Kelas pull-benar masih ada di Bootstrap 3 Lihat 'kelas pembantu' di sini

tarik-benar didefinisikan oleh

.pull-right {
  float: right !important;
}

tanpa info lebih lanjut tentang gaya dan konten, it's sulit untuk mengatakan.

Itu pasti menarik kan ini JSBIN ketika halaman yang lebih luas dari 990px - yang ketika col-md styling tendangan, Bootstrap 3 menjadi ponsel pertama dan semua.

Komentar (0)

Apakah anda berarti sesuatu seperti ini:

HTML

<div class="row">
  <div class="container">

    <div class="col-md-4">
      left content
    </div>

    <div class="col-md-4 col-md-offset-4">

      <div class="yellow-background">
        text
        <div class="pull-right">right content</div>  
      </div>

    </div>
  </div>
</div>

CSS

.yellow-background {
  background: blue;
}

.pull-right {
  background: yellow;
}

Sebuah contoh lengkap dapat ditemukan di Codepen.

g00glen00b
Jawaban edit 25 Februari 2014 в 8:52
Komentar (0)

saya pikir anda mencoba untuk menyelaraskan konten ke kanan dalam div div dengan offset sudah mendorong dirinya sendiri ke kanan, berikut beberapa kode dan LIVE sample:
FYI: .pull-right hanya mendorong div ke kanan, tapi bukan isi di dalam div.

HTML:

<div class="row">
  <div class="container">
    <div class="col-md-4 someclass">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4 someclass">
      <div class="yellow_background totheright">right content</div>
    </div>
  </div>
</div>

CSS:

.someclass{ /*this class for testing purpose only*/
    border:1px solid blue;
    line-height:2em;
}

.totheright{ /*this will align the text to the right*/
  text-align:right;
}

.yellow_background{
    background-color:yellow;
}

Modifikasi lain:

...
<div class="yellow_background totheright">
  <span>right content</span>
  <br/>image also align-right<br/>

</div>
...

harapan itu akan jelas masalah anda

Komentar (0)

Bootstrap 4+ telah dilakukan perubahan utilitas untuk kelas ini. Dari dokumentasi:

Ditambahkan .float-{sm,md,lg,xl}-{kiri,kanan,tidak ada} kelas untuk responsif mengapung dan dihapus .pull-left dan .tarik-benar karena mereka berlebihan .float-left dan .float-right.

Jadi gunakan .float-right (atau ukuran yang setara seperti .float-lg-benar) bukan `.pull-right untuk perataan kanan jika anda're menggunakan lebih baru versi Bootstrap.

Komentar (0)

Tambahkan offset8 untuk kelas anda, misalnya:

<div class="offset8">aligns to the right</div>
emotality
Jawaban edit 6 April 2016 в 11:48
Komentar (1)