Meja depan proyek terbaru menggunakan bootstrap.css + angularjs, dan latar belakang hanya memproses data (menggunakan PHP, hasil pemrosesan langsung JSON_ENCODE ($ ARR), yang sangat keren). Tes mesin simulasi pada chrome telah sempurna, dan tidak ada tes mesin nyata. Setelah menyelesaikannya, saya terpana ketika saya menguji di telepon. Ketika saya menggesek halaman kiri dan kanan, bilah vertikal kosong muncul (seperti yang ditunjukkan pada gambar di bawah). Ditentukan bahwa itu disebabkan oleh panjang yang ditetapkan oleh margin-kanan. Periksa CSS, dan tidak ada kode yang relevan. Tampaknya masalah terjadi di Bootstrap. Meskipun tidak mempengaruhi penggunaan program, rasanya sangat canggung dan Anda harus memperbaikinya.
Periksa halaman dan temukan bahwa masalah ini hanya akan terjadi jika halaman menggunakan sistem grid digunakan. Periksa CSS terkait .row dan temukan bahwa definisi marginnya adalah sebagai berikut:
.row {margin-left: -15px; margin-right: -15px;}.Row umumnya digunakan sebagai elemen bawah wadah dan sebagai elemen atas .col-xx-xx. Ngomong-ngomong, lihat CSS .Container dan Con-xx-xx:
.container {padding-left: 15px; padding-right: 15px;}. col-xx-xx {padding-left: 15px; Padding-right: 15px;}Margin dalam semua elemen .Container memiliki jarak 15px, yang terlihat sangat indah, dan margin dalam .col-xx-xx juga menetapkan 15px. Ini tidak akan disejajarkan dengan elemen .contariner (jarak antara .col-xx-xx dan .container adalah 30px), sehingga elemen raster pertama dan elemen raster terakhir perlu diatur ke {padding-left: 0px;} dan {padding-right: 0px;} masing-masing. Ini memecahkan masalah penyelarasan, tetapi setelah pengaturan, meskipun lebar masing -masing kisi sama, lebar konten yang ditampilkan adalah 15px. Jadi para jenius dari Fb secara cerdik mengadopsi solusi perbatasan luar negatif. Implementasi kode tidak hanya sederhana, tetapi tidak ada masalah lebar konten yang tidak konsisten yang ditampilkan di setiap raster.
Meskipun solusi dari perbatasan luar negatif baik, itu akan menyebabkan perbatasan kosong pada layar kecil (terminal seluler) (titik nyeri yang akan dipecahkan dalam artikel ini). Menyesuaikan Bootstrap memecahkan masalah ini, tetapi terlalu merepotkan. Cara termudah adalah dengan menulis ulang CSS yang relevan.
/* Perlu menelepon* //* fuck 15px untuk iphone start setelah bootstrap.css */. Row {margin: 0;}. col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, 8, Col-LG-LG-LG-LG-LG-LG-5, 8Col-LG-LG-LG-LG-LG-LG-LG-LG-LG-LG-LG-LG-LG .COL-LG-9, .COL-MD-1, .COL-MD-10, .COL-MD-11, .COL-MD-12, .COL-MD-2, .COL-MD-3, .COL-MD-4, .COL-MD-5, .COL-MD-6, .COL-MD-7, .COL-MD-8,. 9, .COL-SM-1, .COL-SM-10, .COL-SM-11, .COL-SM-12, .COL-SM-2, .COL-SM-3, .COL-SM-4, .COL-SM-5, .COL-SM-6, .COL-SM-7, .COL-SM-8, .COL-SM-9, .COL-SM-7, .COL-SM-8, .COL-SM-9 XS-1, .COL-XS-10, .COL-XS-11, .COL-XS-12, .COL-XS-2, .COL-XS-3, .COL-XS-4, .COL-XS-5, .COL-XS-6, .COL-XS-7, .COL-XS-8, .COL-XS-6, Fuck 15px untuk iphone lebih */Itu berhasil dipecahkan karena kisi tidak memiliki bantalan, lebar masing -masing pagar sama, lebar konten yang ditampilkan juga sama, dan dapat diselaraskan dengan unsur -unsur wadah (catatan: konsekuensi ini juga sangat serius, yaitu konten antara masing -masing kisi yang terhubung, dan grid internal dapat diselesaikan dengan mereduksi margin dan cente -content.
Di atas adalah alasan dan solusi untuk ruang kosong di sebelah kanan saat bootstrap.css digesek pada ponsel. Saya harap ini akan membantu semua orang!