col-sm-12 คืออะไร ใช้ทำอะไร

col-sm-12 คือชื่อ class ของ Bootstrap ใช้สำหรับกำหนดความกว้างของคอลัมน์ขนาด 12 คอลัมน์สำหรับการแสดงผลหน้าจอขนาดเล็ก ระหว่าง 576px ไม่เกิน 767px โดย class col-sm-12 อยู่ในหัวข้อ Grid system ซึ่งเป็นส่วนที่ช่วยให้ผู้พัฒนาเว็บไซต์สามารถจัดการการแสดงผลแบบ row และ column ได้อย่างง่าย และมีประสิทธิภาพ

ตัวอย่าง col-sm-12 คืออะไร

1. col-sm-12 คือชื่อ class ใน Bootstrap Framework ในหัวข้อ Grid system

2. col-sm-12 คือใช้สำหรับหน้าจอขนาดเล็ก (small) ระหว่าง ≥576px ถึง ≥767px

3. col-sm-12 ตัวเลข 12 ตามหลังคือจำนวนความกว้างของคอลัมน์ใน 1 แถวแนวนอน

4. col-sm- ตัวเลข 12 สามารถเปลี่ยนเป็นตัวเลขอื่นได้ ตั้งแต่ 1 ถึง 12

5. Bootstrap แบ่งความกว้างการแสดงผลสูงสุด คือ 12 คอลัมน์ ถ้าต้องการ 2 คอลัมน์ คือ col-sm-6 จำนวน 2 อัน (6+6=12)

ตัวอย่าง การใช้ col-sm-12

<div class="container">
	<div class="row">
		<div class="col-sm-12">Column A</div>
		<div class="col-sm-12">Column B</div>
	</div>
</div>

จากตัวอย่างโค้ดการใช้ col-sm-12 เมื่อแสดงบนมือถือ Column A จะแสดง 1 แถว และ Column B จะแสดง 1 แถว โดยอยู่กันคนละแถว เหตุที่เป็นเช่นนี้เพราะ Bootstrap แบ่งพื้นที่แสดงคอลัมน์ต่อ 1 แถว คือ 12 เมื่อกำหนด col-sm-12 ก็แปลว่าแสดงเต็มพื้นที่ของ 1 แถวนั้นเอง