Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Mencapai Penjajaran Footer Responsif dalam Bootstrap Twitter?

Bagaimana untuk Mencapai Penjajaran Footer Responsif dalam Bootstrap Twitter?

Susan Sarandon
Lepaskan: 2024-11-29 10:16:11
asal
338 orang telah melayarinya

How to Achieve Responsive Footer Alignment in Twitter Bootstrap?

Penjajaran Pengaki Responsif dengan Bootstrap Twitter

Dalam artikel ini, kami meneroka isu yang dihadapi oleh pengguna yang cuba menjajarkan pengaki mereka ke bahagian bawah halaman menggunakan teknik CSS dalam konteks Twitter Bootstrap, rangka kerja responsif yang popular.

Isu ini timbul kerana Twitter Bootstrap menggunakan reka bentuk responsif, menjadikannya mencabar untuk mencapai penjajaran pengaki yang diingini menggunakan kaedah CSS konvensional. Untuk menangani perkara ini, mari kita periksa penyelesaian yang berpotensi:

Bootstrap 2.2.1 dan Kemudian

Dengan Bootstrap 2.2.1 atau yang lebih baru, fungsi ini kini disokong secara asli.

Boottrap 3.x

Dalam Bootstrap 3.x, gunakan komponen navbar bersama-sama dengan kelas .navbar-fixed-bottom:

<div class="navbar navbar-fixed-bottom"></div>
Salin selepas log masuk

Bootstrap 4.x

Untuk Bootstrap 4.x, gunakan yang berikut kod:

<div class="navbar fixed-bottom"></div>
Salin selepas log masuk

Nota Tambahan

Ingat untuk turut menambah CSS berikut untuk mengelakkan kandungan halaman daripada dilindungi:

body { padding-bottom: 70px; }
Salin selepas log masuk

Untuk dokumentasi yang lebih terperinci, rujuk laman web rasmi Bootstrap: http://getbootstrap.com/components/#navbar-fixed-bottom

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Penjajaran Footer Responsif dalam Bootstrap Twitter?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan