การทำความเข้าใจคลาสกริด (col-sm- # และ col-lg- #) ใน Bootstrap 3

ฉันเริ่มต้นใช้งาน Bootstrap 3 และฉันมีปัญหาในการทำความเข้าใจว่าคลาสกริดมีไว้เพื่อใช้อย่างไร

นี่คือสิ่งที่ฉันคิดได้จนถึงตอนนี้:

ดูเหมือนว่าคลาสcol-sm-#และcol-lg-#แตกต่างจากคลาสเก่าทั่วไปตรงcol-#ที่จะใช้เฉพาะเมื่อหน้าจอมีขนาดใหญ่กว่าที่กำหนด (768px และ 992px ตามลำดับ) หากคุณละเว้น -sm- หรือ -lg- divs จะไม่ยุบรวมเป็นคอลัมน์เดียว

แต่เมื่อฉันสร้างสอง divs ภายในแถวที่มีทั้งcol-sm-6ดูเหมือนว่าพวกเขาเป็นเพียงเคียงข้างเมื่อหน้าต่างอยู่ระหว่าง 768px และ 992px กว้าง ในคำอื่น ๆ ถ้าผมหดหน้าต่างตลอดทางลงแล้วค่อยๆขยายมันรูปแบบคอลัมน์เดียวแล้วสองคอลัมน์แล้วกลับไปที่คอลัมน์เดียวอีกครั้ง

1. นี่เป็นพฤติกรรมที่ตั้งใจไว้หรือไม่?
2. ถ้าฉันต้องการสองคอลัมน์สำหรับสิ่งที่เกิน 768px ฉันควรใช้ทั้งสองคลาสหรือไม่ ( <div class="col-sm-6 col-lg-6">)
3. ควรcol-6 นอกจากนี้ยังจะรวม?<div class="col-6 col-sm-6 col-lg-6">

[อัปเดตด้านล่าง]

ฉันดูเอกสารอีกครั้งและดูเหมือนว่าฉันมองข้ามส่วนที่พูดถึงเรื่องนี้โดยเฉพาะ

คำตอบสำหรับคำถามของฉัน:

1. ใช่หมายถึงใช้กับช่วงที่เจาะจงเท่านั้นแทนที่จะใช้ทุกอย่างที่อยู่เหนือความกว้างที่กำหนด

2. ใช่คลาสมีจุดมุ่งหมายเพื่อรวมเข้าด้วยกัน

3. ดูเหมือนว่าสิ่งนี้จะเหมาะสมในบางกรณี แต่ไม่ใช่อย่างอื่นเนื่องจากโดยทั่วไปแล้วคลาส col- # จะเทียบเท่ากับ col-xsm- # หรือความกว้างเหนือ 0px (ความกว้างทั้งหมด)

นอกเหนือจากการอ่านเอกสารเร็วเกินไปฉันคิดว่าฉันสับสนเพราะฉันเข้ามาใน Bootstrap 3 พร้อมกับ "Bootstrap 2 mentality" โดยเฉพาะอย่างยิ่งฉันใช้รูปแบบการตอบสนอง (ทางเลือก) (bootstrap-responsive.css) ใน v2 และ v3 นั้นค่อนข้างแตกต่างกัน (สำหรับ IMO ที่ดีกว่า)

อัปเดตสำหรับรุ่นที่เสถียร:

คำถามนี้เดิมเขียนเมื่อ RC1 หมด พวกเขาทำการเปลี่ยนแปลงที่สำคัญบางอย่างใน RC2 ดังนั้นสำหรับทุกคนที่อ่านตอนนี้ไม่ใช่ทุกอย่างที่กล่าวถึงข้างต้นยังคงมีผลบังคับใช้

ในขณะที่ฉันกำลังเขียนสิ่งนี้col-*-#ชั้นเรียน DO ดูเหมือนจะมีผลบังคับใช้ขึ้นไป ตัวอย่างเช่นหากคุณต้องการให้องค์ประกอบมีขนาด 12 คอลัมน์ (เต็มความกว้าง) สำหรับโทรศัพท์ แต่สอง 6 คอลัมน์ (ครึ่งหน้า) สำหรับแท็บเล็ตขึ้นไปคุณจะต้องทำสิ่งนี้:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(พวกเขายังเพิ่มจุดแตก xs เพิ่มเติมหลังจากที่เขียนคำถามนี้แล้ว)

ที่นี่คุณมีบทช่วยสอนที่ดีมากซึ่งอธิบายวิธีใช้คลาสกริดใหม่ใน Bootstrap 3

นอกจากนี้ยังครอบคลุม mixins เป็นต้น

"ถ้าฉันต้องการสองคอลัมน์สำหรับสิ่งที่เกิน 768px ฉันควรใช้ทั้งสองคลาสหรือไม่"

สิ่งนี้ควรจะง่ายพอ ๆ กับ:

<div class="row">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>    
</div>

ไม่จำเป็นต้องเพิ่มcol-lg-6ด้วย

การสาธิต: http://www.bootply.com/73119

วิธีที่ดีที่สุดในการทำความเข้าใจคือคิดจากบนลงล่าง (เดสก์ท็อปขนาดใหญ่ไปจนถึงโทรศัพท์มือถือ)

ประการแรกเนื่องจาก B3 เป็นอุปกรณ์เคลื่อนที่ก่อนดังนั้นหากคุณใช้ xs คอลัมน์จะเหมือนกันตั้งแต่เดสก์ท็อปขนาดใหญ่ไปจนถึง xs (ฉันแนะนำให้ใช้ xs หรือ sm เพราะจะทำให้ทุกอย่างเป็นไปตามที่คุณต้องการในทุกขนาดหน้าจอ)

ประการที่สองถ้าคุณต้องการให้ความกว้างของคอลัมน์บนอุปกรณ์หรือความละเอียดที่แตกต่างกันมากกว่าที่คุณจะสามารถเพิ่มคลาสต่างๆได้เช่น

ข้างต้นจะเปลี่ยนความกว้างตามความละเอียดหน้าจอโปรดจำไว้ว่าฉันกำลังเก็บคอลัมน์ทั้งหมดในแต่ละคลาส = 12

ฉันหวังว่าคำตอบของฉันจะช่วยได้!

การแก้ไขคำตอบของ SDP ข้างต้นคุณไม่จำเป็นต้องประกาศในcol-xs-12 <div class="col-xs-12 col-sm-6">Bootstrap 3 เป็นอุปกรณ์เคลื่อนที่เป็นอันดับแรกดังนั้นทุกคอลัมน์ div จะถือว่าเป็น div ที่มีความกว้าง 100% ตามค่าเริ่มต้นซึ่งหมายความว่าที่ขนาด "xs" จะมีความกว้าง 100% โดยค่าเริ่มต้นจะเป็นพฤติกรรมนั้นเสมอไม่ว่าคุณจะตั้งค่าไว้ที่ใดก็ตามsm, md, lg. หากคุณต้องการให้xsคอลัมน์ของคุณไม่ใช่ 100% คุณจะต้องทำไฟล์col-xs-(1-11).

อาจจะสายไปแล้วเพราะฉันคิดว่าพวกเราส่วนใหญ่ใช้ BS4 บทความนี้อธิบายคำถามทั้งหมดที่คุณถามอย่างละเอียดและเรียบง่ายรวมถึงสิ่งที่ต้องทำเมื่อ คำแนะนำโดยละเอียดในการใช้ bs4 หรือbootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7