Bagaimana untuk Mengubah Susunan Bootstrap 3 Lajur pada Mudah Alih?

Cara Menyusun Semula Susunan Lajur Bootstrap 3 pada Reka Letak Mudah Alih

Apabila mencipta reka letak responsif menggunakan Bootstrap 3, anda mungkin menghadapi situasi di mana pesanan itu lajur berubah apabila beralih daripada paparan desktop kepada mudah alih. Untuk menangani perkara ini dan memastikan kandungan utama kekal di bahagian atas pada peranti mudah alih, ikut langkah berikut:

1. Songsangkan Susunan Lajur:

Daripada menggunakan susunan lajur standard (bar sisi di kiri, kandungan di sebelah kanan) untuk paparan desktop, tukar pesanan untuk paparan mudah alih. Contohnya:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

2. Gunakan kelas tolak dan tarik:

Dalam paparan desktop, gunakan col-lg-push dan col-lg-pull untuk menolak kandungan utama ke kanan dan tarik bar sisi ke kiri, dengan berkesan menukar pesanan mereka.

<div class="row">
  <div class="col-lg-9 col-lg-push-3">
    <!-- Main content -->
  </div>
  <div class="col-lg-3 col-lg-pull-9">
    <!-- Sidebar -->
  </div>
</div>

3. Balikkan susunan lajur:

Sebagai alternatif, anda boleh membalikkan susunan lajur dalam HTML, supaya kandungan utama didahulukan:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

Dengan mengikuti langkah ini , anda boleh menyusun semula lajur pada paparan mudah alih dengan berkesan dalam Bootstrap 3, memastikan hierarki kandungan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Susunan Bootstrap 3 Lajur pada Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!