ข้อแตกต่างระหว่างคลาส container และ container-fluid บน twitter bootstrap

สำหรับคลาส container นั้น จะมีขนาดที่จำเพาะในแต่ละขนาดหน้าจอ (xs, sm, md, lg) ส่วน คลาส container-fluid จะขยายจนเต็มหน้าจอ เนื่องจากมีการระบุไว้ใน media query ของไฟล์ bootstrap.css  ประมาณบรรทัดที่ 1390 เป็นต้นไป

Untitled

จะสังเกตว่า คลาส container นั้นจะมี media query ที่กำหนด size มาตรฐานไว้ 3 size ซึ่งเมื่อขนาดหน้าจออยู่ในช่วงที่กำหนด ขนาดของ container ก็จะ scale ไปตามค่าดังกล่าว ซึ่งจะมีขนาดเล็กว่า ขนาดของหน้าจอโดยอัตโนมัติ ซึ่งจะทำให้เวลาเรานำไปใช้งานจะมีพื้นที่ขอบด้านข้างคงเหลือไว้เสมอ ส่วนคลาส container-fluid นั้นจะ scale จนเต็มขนาดหน้าจอ คงไว้แต่ค่า padding เท่านั้นครับ

แหล่งอ้างอิง

http://stackoverflow.com/questions/9780333/fluid-or-fixed-grid-system-in-responsive-design-based-on-twitter-bootstrap