Bagaimana untuk memusatkan div dalam bootstrap?
- Gunakan MX-AUTO dan W- ke pusat unsur-unsur peringkat blok secara mendatar; 2. Gunakan pusat teks untuk memusatkan teks atau elemen sebaris; 3. Gunakan D-Flex, Justify-Content-Center, dan Align-Items-Center ke pusat secara menegak dan mendatar; 4. Tambah Min-VH-100 ke pusat di Viewport; 5. Gunakan kelas mengimbangi ke lajur tengah dalam grid. Pilih kaedah yang sesuai mengikut struktur susun atur, dan pusat responsif boleh dicapai tanpa CSS tersuai.
Memusatkan div dalam bootstrap bergantung kepada sama ada anda mahu memusatkannya secara mendatar , menegak , atau kedua -duanya . Berikut adalah cara untuk melakukannya dengan betul menggunakan kelas utiliti terbina dalam Bootstrap-tiada CSS tersuai yang diperlukan dalam kebanyakan kes.
✅ 1. Pusat mendatar (kiri/kanan)
Untuk unsur-unsur peringkat blok seperti div , gunakan utiliti auto margin Bootstrap.
Gunakan mx-auto untuk bekas tetap atau kandungan lebar:
<div class = "MX-AUTO W-50 BG-Light-Center"> Berpusat secara mendatar </div>
-
mx-auto→ Menetapkanmargin-leftdanmargin-rightkeauto -
w-50→ Beri lebar Div 50% (diperlukan, keranamx-autohanya berfungsi pada unsur-unsur dengan lebar yang ditetapkan)
? Bekerja terbaik di dalam
.container,.row, atau susun atur lebar penuh.
✅ 2. Pusat mendatar peringkat teks
Sekiranya anda memusatkan kandungan atau teks sebaris di dalam div , gunakan text-center :
<div class = "text-center"> <div class = "d-inline-block"> Content content </div> </div>
-
text-center→ Pusat Kanak-kanak Inline/Inline-Block - Gabungkan dengan
d-inline-blockjika anda memusatkandivdi kalangan adik-beradik
✅ 3. Pusat menegak (atas/bawah)
Gunakan utiliti flexbox untuk pusat menegak.
Kandungan pusat di dalam div induk (baik secara menegak dan mendatar):
<div class = "D-flex Justify-Content-Center Align-Items-Center" style = "Height: 300px;">
<div class = "BG-Primary Text-White P-3">
Berpusat!
</div>
</div>-
d-flex→ membolehkan susun atur flex -
justify-content-center→ pusat secara mendatar -
align-items-center→ pusat secara menegak - Tetapkan ketinggian (seperti
min-vh-100untuk ketinggian paparan penuh) jadi ada ruang untuk berpusat di
✅ 4. Pusat di seluruh pandangan
Untuk memusatkan div di tengah -tengah skrin :
<div class = "D-flex Justify-Content-Center Align-Items-Center Min-VH-100"> <div class = "P-4 BG-White Shadow"> berpusat di Viewport </div> </div>
-
min-vh-100→ Ketinggian minimum 100% ketinggian pandangan - Sempurna untuk halaman pendaratan, modal, atau memuatkan skrin
✅ 5. Pusat lajur dalam barisan grid
Dalam sistem grid Bootstrap, gunakan kelas offset-* :
<div class = "row">
<div class = "col-6 offset-3">
Berpusat 6-lajur lebar div
</div>
</div>-
col-6→ Ambil 6 lajur -
offset-3→ melangkau 3 lajur (separuh daripada baki 6), memusatkannya
Ini hanya berfungsi dengan grid 12 lajur Bootstrap.
Ringkasan: Rujukan cepat
| Matlamat | Kelas bootstrap |
|---|---|
| Ufuk. Pusat div | mx-auto w-*
|
| Ufuk. Teks tengah/sebaris | text-center
|
| Vert. Ufuk. pusat | d-flex , justify-content-center , align-items-center
|
| Pusat di Viewport | Tambahkan min-vh-100 ke Flex Container |
| Pusat lajur grid | col-* offset-*
|
Tidak perlu menulis CSS tersuai - Kelas utiliti Bootstrap mengendalikan kebanyakan keperluan berpusat secara bersih dan responsif.
Pada asasnya, pilih kaedah berdasarkan struktur susun atur anda.
Atas ialah kandungan terperinci Bagaimana untuk memusatkan div dalam bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Borang Bootstrap: Kesalahan Biasa
Jul 14, 2025 am 12:28 AM
Bootstrapformscanleadtoerrorslikemisusingthegridsystem, improperformcontrols, validationissues, mengabaikanCustomcss, aksesibiliti, danperformance.toavoidThese: 1) usecolumnclasslikecol-sm-orcol-md-foresponsif;
Apa yang anda perlu tahu mengenai sistem grid bootstrap
Jul 13, 2025 am 01:26 AM
BootstrapgridsystemisapowultoolforcreatingResponsive, mobile-firstlayouts.1) iTusesa12-columngridwithclasslike'row'and'col 'ForstructuringContent.2) breakpointslike'col-sm-6'or'col-md-4'allowlayoutstoadapttodifferentscreensizes.3) nestinggridsandusin
Bagaimana cara memasang dan menggunakan perpustakaan ikon bootstrap?
Jul 27, 2025 am 01:25 AM
Terdapat tiga cara untuk memasang dan menggunakan bootstrapicons: 1. Gunakan CDN dan tambahkan pautan ke kepala HTML; 2. Pasang melalui npm, sesuai untuk projek moden seperti React dan Vue. Anda perlu menjalankan npminstallbootstrap-icon dan import CSS; 3. Muat turun secara manual fail SVG atau font dan mengimportnya. Apabila menggunakannya, anda boleh menambah kelas nama BI dan ikon (seperti Bi-Heart) untuk memasukkan ikon. Anda juga boleh menggunakan elemen sebaris lain seperti SPAN. Adalah disyorkan untuk menggunakan fail SVG untuk keupayaan prestasi dan penyesuaian yang lebih baik. Anda boleh menyesuaikan saiz melalui BI-LG, BI-2X dan kelas lain, dan menggunakan teks bootstrap seperti teks-danger.
Bagaimana membuat bootstrap navbar melekit di atas?
Jul 20, 2025 am 01:57 AM
Gunakan kelas atau kedudukan tetap: melekit untuk melaksanakan bar navigasi untuk menetapkan bahagian atas. Bootstrap menyediakan kelas tetap, yang boleh ditambah secara langsung ke NAVBAR untuk mencapai kesan tetap, tetapi anda perlu menambah padding ke badan untuk mengelakkan kandungan disekat; Jika anda memerlukan kawalan yang lebih fleksibel, anda boleh menetapkan kedudukan: melekit, nilai atas dan indeks z oleh CSS adat; Di samping itu, anda perlu ambil perhatian bahawa bekas induk tidak boleh melimpah: Tersembunyi, nilai teratas mesti ditetapkan, dan z-indeks disyorkan; Masalah biasa termasuk overlay gaya, tumpang tindih elemen, dan pengenalan fail CSS yang salah. Adalah disyorkan untuk menyelesaikan masalah gaya melalui alat pemaju dan mengelakkannya.
Bagaimana untuk melumpuhkan butang bootstrap?
Jul 26, 2025 am 07:02 AM
TodisableAbootstrapButton, AddThedisableDatTributeForElements: DisabledButton, WhatGraysOutTheButton, CrestrentsClicks, andappliestHeCorrectVisualStateAtomaticiSviaBootstrap'sstyly.2.forelementsStylylyly, "disableasi"
Bagaimana cara menggunakan utiliti bootstrap untuk gaya navbar?
Jul 18, 2025 am 02:44 AM
Kunci untuk merancang bar navigasi dengan utiliti bootstrap adalah untuk menggabungkan latar belakang, warna, jarak dan kelas responsif untuk mencapai pelarasan gaya. 1. Gunakan kelas .bg- dan .text- untuk menetapkan warna latar belakang dan teks, seperti .bg-dark dengan .navbar-dark; 2. Gunakan kelas .m- dan .p- untuk mengawal margin dan margin dalaman, seperti elemen .ms-Auto-align; 3. Laraskan tingkah laku responsif melalui kelas .- dan .flex-, seperti .d-tiada untuk menyembunyikan butang skrin besar. Kaedah ini boleh melengkapkan susun atur gaya tanpa CSS tersuai.
Membuat Navbar Dinamik di Bootstrap: Tutorial Langkah demi Langkah
Jul 16, 2025 am 03:31 AM
Untuk membuat bar navigasi dinamik di bootstrap, ikuti langkah -langkah ini: 1. Sertakan fail bootstrap, dihoskan melalui CDN atau tempatan. 2. Buat struktur bar navigasi asas dan gunakan komponen Navbar Bootstrap. 3. Gunakan JavaScript untuk mencapai kesan dinamik, seperti memaparkan atau menyembunyikan bar navigasi mengikut kedudukan tatal. 4. Laraskan respons dan gunakan kelas breakpoint yang berbeza seperti Navbar-Expand-LG. 5. Sesuaikan penampilan dan kesan animasi bar navigasi melalui CSS. 6. Pastikan prestasi dan kebolehcapaian bar navigasi, uji peranti yang berbeza dan tambahkan tag aria. Melalui langkah -langkah ini, anda boleh membuat bar navigasi dinamik yang cantik dan meningkatkan pengalaman pengguna.
Bagaimana cara menambah borang carian di dalam navbar bootstrap?
Jul 25, 2025 am 01:20 AM
Kunci untuk menambah borang carian di bar navigasi bootstrap adalah untuk mempunyai struktur yang jelas dan penggunaan nama kelas yang betul. 1. Gunakan D-Flex untuk mengatur elemen bentuk secara mendatar, kawalan borang dan kelas BTN digunakan untuk kotak input dan butang masing-masing; 2. Gunakan MS-AUTO atau ME-AUTO untuk mengawal penjajaran bentuk untuk mencapai susun atur kiri atau kanan; 3. Gunakan W-100 dan Flex-Grow-1 untuk mengoptimumkan paparan mudah alih untuk mengelakkan kekeliruan susun atur; 4. Pilih kedudukan kotak carian mengikut tempat kejadian. Amalan umum termasuk meletakkannya di sebelah kanan, di tengah -tengah navigasi atau dalam menu runtuh; 5. Jika interaksi kompleks selesai secara automatik, JS tambahan diperlukan. Dengan menggabungkan kelas bootstrap, kotak carian responsif boleh dilaksanakan tanpa kod kompleks.
