ສາມຖັນເທົ່າກັນ

ເອົາສາມຖັນຄວາມກວ້າງເທົ່າກັນ ເລີ່ມຈາກເດັສທັອບ ແລະປັບຂະໜາດເປັນເດັສທັອບຂະໜາດໃຫຍ່ . ໃນອຸປະກອນມືຖື, ແທັບເລັດແລະຂ້າງລຸ່ມນີ້, ຖັນຈະ stack ອັດຕະໂນມັດ.

.col-md-4
.col-md-4
.col-md-4

ສາມຖັນບໍ່ເທົ່າກັນ

ເອົາສາມຖັນ ເລີ່ມຕົ້ນຈາກເດັສທັອບແລະປັບຂະຫນາດໄປຫາ desktops ຂະຫນາດໃຫຍ່ ທີ່ມີຄວາມກວ້າງຕ່າງໆ. ຈືຂໍ້ມູນການ, ຖັນຕາຂ່າຍໄຟຟ້າຄວນເພີ່ມເຖິງສິບສອງສໍາລັບຕັນແນວນອນດຽວ. ຫຼາຍກວ່ານັ້ນ, ແລະຖັນເລີ່ມຕົ້ນ stacking ບໍ່ວ່າ viewport ໄດ້.

.col-md-3
.col-md-6
.col-md-3

ສອງຖັນ

ເອົາສອງຖັນ ເລີ່ມຕົ້ນຈາກເດັສທັອບ ແລະປັບຂະໜາດເປັນເດັສທັອບຂະໜາດໃຫຍ່ .

.col-md-8
.col-md-4

ຄວາມກວ້າງເຕັມ, ຖັນດຽວ

ບໍ່ມີຫ້ອງຮຽນຕາຕະລາງແມ່ນມີຄວາມຈໍາເປັນສໍາລັບອົງປະກອບເຕັມຄວາມກວ້າງ.


ສອງຖັນທີ່ມີສອງຖັນຊ້ອນກັນ

ຕາມເອກະສານ, ການສ້າງຮັງແມ່ນງ່າຍ - ພຽງແຕ່ໃສ່ແຖວແຖວຢູ່ໃນຖັນທີ່ມີຢູ່ແລ້ວ. ນີ້ເຮັດໃຫ້ທ່ານມີສອງຄໍລໍາ ເລີ່ມຕົ້ນຈາກ desktops ແລະຂະຫນາດໄປຫາ desktops ຂະຫນາດໃຫຍ່ , ກັບອີກສອງຖັນ (ຄວາມກວ້າງເທົ່າທຽມກັນ) ພາຍໃນຖັນໃຫຍ່.

ໃນຂະຫນາດອຸປະກອນມືຖື, ແທັບເລັດແລະລົງ, ຖັນເຫຼົ່ານີ້ແລະຖັນທີ່ຊ້ອນກັນຂອງພວກມັນຈະ stack.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

ປະສົມກັນ: ມືຖື ແລະເດັສທັອບ

ລະບົບຕາຂ່າຍ Bootstrap 3 ມີ 4 ຊັ້ນຮຽນ: xs (ໂທລະສັບ), sm (ແທັບເລັດ), md (desktops), ແລະ lg (ເດັສທັອບຂະຫນາດໃຫຍ່). ທ່ານ​ສາ​ມາດ​ນໍາ​ໃຊ້​ເກືອບ​ທຸກ​ປະ​ສົມ​ຂອງ​ຫ້ອງ​ຮຽນ​ເຫຼົ່າ​ນີ້​ເພື່ອ​ສ້າງ​ຮູບ​ແບບ​ເຄື່ອນ​ໄຫວ​ແລະ​ປ່ຽນ​ແປງ​ໄດ້​ຫຼາຍ​ຂຶ້ນ​.

ແຕ່ລະຊັ້ນຮຽນເພີ່ມຂຶ້ນ, ຊຶ່ງຫມາຍຄວາມວ່າຖ້າທ່ານວາງແຜນທີ່ຈະກໍານົດຄວາມກວ້າງດຽວກັນສໍາລັບ xs ແລະ sm, ທ່ານພຽງແຕ່ຕ້ອງການລະບຸ xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

ປະສົມກັນ: ມືຖື, ແທັບເລັດ, ແລະເດັສທັອບ

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

ການລ້າງຖັນ

ລ້າງການລອຍ ຢູ່ຈຸດຢຸດສະເພາະເພື່ອປ້ອງກັນການຫໍ່ທີ່ງຸ່ມງ່າມດ້ວຍເນື້ອໃນທີ່ບໍ່ສະໝ່ຳສະເໝີ.

.col-xs-6 .col-sm-3
ປັບຂະໜາດ viewport ຂອງທ່ານ ຫຼືກວດເບິ່ງມັນຢູ່ໃນໂທລະສັບຂອງທ່ານເປັນຕົວຢ່າງ.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, ແລະດຶງ reset

ຣີເຊັດການຊົດເຊີຍ, pushes, ແລະ pulls ຢູ່ breakpoints ສະເພາະ.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0