อะไรคือความแตกต่างระหว่าง col-lg- *, col-md- * และ col-sm- * ใน Bootstrap?

อะไรคือความแตกต่างในหมู่col-lg-*, col-md-*และcol-sm-*ในเงินทุน Twitter?

อัปเดต 2019 ...

Bootstrap 3ตารางมาใน4ชั้น (หรือ "จุดพัก") ...

• ขนาดเล็กพิเศษ (สำหรับสมาร์ทโฟน.col-xs-*)
• เล็ก (สำหรับแท็บเล็ต.col-sm-*)
• ปานกลาง (สำหรับแล็ปท็อป.col-md-*)
• ใหญ่ (สำหรับแล็ปท็อป / เดสก์ท็อป.col-lg-*)

ขนาดกริดเหล่านี้ช่วยให้คุณสามารถควบคุมพฤติกรรมกริดบนความกว้างที่แตกต่างกัน ชั้นที่แตกต่างกันจะถูกควบคุมโดย CSS คำสั่งสื่อ

ดังนั้นในตาราง 12 คอลัมน์ของ Bootstrap ...

col-sm-3กว้าง 3 ใน 12 คอลัมน์ (25%) จากความกว้างของอุปกรณ์ขนาดเล็กทั่วไป(> 768 พิกเซล)

col-md-3คือ 3 12 คอลัมน์กว้าง (25%) ในแบบฉบับกลางความกว้างของอุปกรณ์ (> 992 พิกเซล)

ชั้นขนาดเล็ก ( xs, smหรือmd) ยังกำหนดขนาดสำหรับความกว้างหน้าจอขนาดใหญ่ ดังนั้นสำหรับคอลัมน์ขนาดเดียวกันในทุกเทียร์ให้ตั้งค่าความกว้างสำหรับวิวพอร์ตที่เล็กที่สุด ...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> เป็นเช่นเดียวกับ

<div class="col-sm-3">..</div>

เทียร์ที่ใหญ่กว่านั้นจะบอกเป็นนัย เพราะcol-sm-3หมายความว่า3 units on sm-and-upเว้นแต่จะถูกแทนที่โดยเฉพาะโดยระดับที่ใหญ่กว่าที่ใช้ขนาดที่แตกต่างกัน

xs(ค่าเริ่มต้น)> แทนที่โดยsm> แทนที่โดยmd> แทนที่โดยlg

รวมชั้นเรียนที่จะใช้ความกว้างของการเปลี่ยนแปลงคอลัมน์ที่แตกต่างกันขนาดตาราง สิ่งนี้จะสร้างเค้าโครงที่ตอบสนองได้

<div class="col-md-3 col-sm-6">..</div>

sm, mdและlgกริดจะทั้งหมด "กอง" แนวตั้งบนหน้าจอ / viewports น้อยกว่า 768 พิกเซล นี่คือที่ที่xsตารางพอดีกับคอลัมน์ที่ใช้col-xs-*คลาสจะไม่เรียงซ้อนในแนวตั้งและดำเนินการลดขนาดบนหน้าจอที่เล็กที่สุด

ปรับขนาดเบราว์เซอร์ของคุณโดยใช้การสาธิตนี้แล้วคุณจะเห็นเอฟเฟกต์การปรับขนาดกริด

Bootstrap 4

ในBootstrap 4มี-xl-ขนาดใหม่ให้ดูการสาธิตนี้ นอกจากนี้ยังมี-xs-มัดได้ถูกลบออกดังนั้นคอลัมน์ที่เล็กที่สุดเป็นเพียงcol-1, col-2.. col-12ฯลฯ ..

col-*- 0 (xs)
col-sm-*- 576px
col-md-*- 768px
col-lg-*- 992px
col-xl-*- 1200px

Bootstrap 4 Grid Demo

นอกจากนี้เงินทุนรวมถึง 4 ใหม่คอลัมน์อัตโนมัติรูปแบบ เหล่านี้ยังมีจุดพักการตอบสนอง ( col, col-sm, col-mdฯลฯ .. ) แต่ไม่ได้กำหนดความกว้าง% ดังนั้นคอลัมน์เลย์เอาต์อัตโนมัติจะเติมความกว้างเท่ากันทั่วทั้งแถว

บทความนี้อธิบายเพิ่มเติมเกี่ยวกับตาราง Bootstrap

bootstrap docsอธิบาย แต่มันยังต้องใช้เวลาพอสมควร มันสมเหตุสมผลมากขึ้นเมื่อฉันอธิบายให้ตัวเองด้วยหนึ่งในสองวิธี:

หากคุณนึกถึงคอลัมน์ที่เริ่มต้นในแนวนอนคุณสามารถเลือกเมื่อคุณต้องการให้คอลัมน์เหล่านั้นเรียงซ้อนกัน

ตัวอย่างเช่นหากคุณเริ่มต้นด้วยคอลัมน์: ABC

คุณตัดสินใจว่าเมื่อไรที่สแต็คควรเป็นดังนี้

A

B

ค

หากคุณเลือก col-lg คอลัมน์จะเรียงซ้อนกันเมื่อความกว้างน้อยกว่า <1200px

หากคุณเลือก col-md ดังนั้นคอลัมน์จะสแตกเมื่อความกว้างเป็น <992px

หากคุณเลือก col-sm คอลัมน์จะสแตกเมื่อความกว้างเป็น <768px

หากคุณเลือก col-xs ดังนั้นคอลัมน์จะไม่เรียงซ้อนกัน

ในทางกลับกันหากคุณนึกถึงคอลัมน์ที่เริ่มซ้อนกันคุณสามารถเลือกได้ว่าจุดใดที่จะเป็นแนวนอน :

หากคุณเลือก col-sm คอลัมน์จะกลายเป็นแนวนอนเมื่อความกว้างคือ> = 768px

หากคุณเลือก col-md คอลัมน์จะกลายเป็นแนวนอนเมื่อความกว้างคือ> = 992px

หากคุณเลือก col-lg คอลัมน์จะกลายเป็นแนวนอนเมื่อความกว้างเป็น> = 1200px

จากเอกสาร Bootstrap ของ Twitter :

• small grid (≥ 768px) = .col-sm-*,
• กริดกลาง (≥ 992px) = .col-md-*,
• ตารางขนาดใหญ่ (≥ 1200px) .col-lg-*=

ฉันคิดว่าความสับสนของเรื่องนี้คือความจริงที่ว่า BootStrap 3 เป็นระบบตอบสนองแรกของอุปกรณ์พกพาและล้มเหลวในการอธิบายว่าสิ่งนี้มีผลต่อลำดับชั้นของ col-xx-n ในส่วนของเอกสาร Bootstrap อย่างไร สิ่งนี้ทำให้คุณสงสัยว่าจะเกิดอะไรขึ้นกับอุปกรณ์ขนาดเล็กถ้าคุณเลือกค่าสำหรับอุปกรณ์ขนาดใหญ่และทำให้คุณสงสัยว่าจำเป็นต้องระบุหลายค่าหรือไม่ (คุณทำไม่ได้)

ฉันจะพยายามชี้แจงสิ่งนี้โดยระบุว่า ... การลดขนาดของเกรน (xs, sm) พยายามรักษาลักษณะที่ปรากฏของเค้าโครงบนหน้าจอขนาดเล็กและขนาดใหญ่กว่า (md, lg) จะแสดงอย่างถูกต้องเฉพาะบนหน้าจอขนาดใหญ่เท่านั้น ค่าที่ยกมาในตัวอย่างก่อนหน้านี้อ้างถึงเกณฑ์ที่ bootstrap ลดระดับลักษณะที่ปรากฏให้พอดีกับหน้าจอที่มีอยู่

สิ่งนี้หมายความว่าในทางปฏิบัติคือถ้าคุณสร้างคอลัมน์ col-xs-n พวกเขาจะยังคงรักษาลักษณะที่ถูกต้องแม้บนหน้าจอขนาดเล็กมากจนกระทั่งหน้าต่างลดลงจนถึงขนาดที่ จำกัด ดังนั้นหน้าไม่สามารถแสดงได้อย่างถูกต้อง นี่ควรหมายความว่าอุปกรณ์ที่มีความกว้าง 768px หรือน้อยกว่าควรแสดงตารางของคุณในขณะที่คุณออกแบบมันไม่ใช่แสดงในรูปแบบคอลัมน์เดียวหรือที่ล้อมรอบ เห็นได้ชัดว่านี่ยังขึ้นอยู่กับเนื้อหาของคอลัมน์และนั่นคือประเด็นทั้งหมด หากหน้าพยายามที่จะแสดงหลายคอลัมน์ของข้อมูลขนาดใหญ่เคียงข้างกันบนหน้าจอเล็ก ๆ คอลัมน์นั้นจะถูกพันด้วยวิธีที่น่ากลัวหากคุณไม่ได้คำนึงถึงมัน ดังนั้นขึ้นอยู่กับข้อมูลภายในคอลัมน์ที่คุณสามารถตัดสินใจได้ว่าจุดใดที่รูปแบบนั้นศักดิ์สิทธิ์เพื่อแสดงเนื้อหาอย่างเพียงพอ

เช่นหากหน้าของคุณมีสามคอลัมน์ bootstrap col-sm-n จะตัดคอลัมน์เป็นแถวเมื่อความกว้างของหน้าลดลงต่ำกว่า 992px ซึ่งหมายความว่าข้อมูลยังคงมองเห็นได้ แต่จะต้องเลื่อนแนวตั้งเพื่อดูข้อมูล หากคุณไม่ต้องการให้เลย์เอาต์ของคุณลดลงให้เลือก xs (ตราบเท่าที่ข้อมูลของคุณสามารถแสดงผลได้อย่างเพียงพอบนอุปกรณ์ความละเอียดต่ำในสามคอลัมน์)

หากตำแหน่งแนวนอนของข้อมูลมีความสำคัญคุณควรลองเลือกค่าความละเอียดต่ำเพื่อรักษาลักษณะการมองเห็น หากตำแหน่งมีความสำคัญน้อยกว่า แต่ต้องมองเห็นหน้าบนอุปกรณ์ทั้งหมดควรใช้ค่าที่สูงกว่า

หากคุณเลือก col-lg-n คอลัมน์จะแสดงอย่างถูกต้องจนกว่าความกว้างของหน้าจอจะลดลงต่ำกว่าขีด จำกัด xs ที่ 1200px

ขนาดอุปกรณ์และส่วนนำหน้าของคลาส:

• อุปกรณ์ขนาดเล็กพิเศษโทรศัพท์ (<768px) - .col-xs-
• อุปกรณ์ขนาดเล็กแท็บเล็ต (≥768px) - .col-sm-
• เดสก์ท็อปอุปกรณ์ขนาดกลาง (≥992px) - .col-md-
• เดสก์ท็อปอุปกรณ์ขนาดใหญ่ (≥1200px) - .col-lg-

ตัวเลือกกริด:

อ้างอิง: ระบบกริด

TL; DR

.col-X-Yวิธีการอยู่กับขนาดหน้าจอ X และขึ้น , ยืดองค์ประกอบนี้เพื่อเติมเต็มคอลัมน์ Y

Bootstrap ให้ตาราง 12 คอลัมน์ต่อ.rowดังนั้น Y = 3 หมายถึงความกว้าง = 25%

xs, sm, md, lg มีขนาดสำหรับสมาร์ทโฟนแท็บเล็ตแล็ปท็อปเดสก์ท็อปตามลำดับ

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

ตัวอย่าง

<div class="col-lg-6 col-xs-12">

ความหมาย: ความกว้าง 50% บนเดสก์ท็อปความกว้าง 100% บนมือถือแท็บเล็ตและแล็ปท็อป

.col-xs-$   Extra Small     Phones Less than 768px 
.col-sm-$   Small Devices   Tablets 768px and Up 
.col-md-$   Medium Devices  Desktops 992px and Up 
.col-lg-$   Large Devices   Large Desktops 1200px and Up 

กรณีหนึ่งโดยเฉพาะ: ก่อนเรียนรู้ระบบกริดบูตให้ตรวจสอบให้แน่ใจว่าเบราว์เซอร์ซูมถูกตั้งค่าเป็น 100% (ร้อยเปอร์เซ็นต์) ตัวอย่างเช่น: หากความละเอียดหน้าจอคือ (1600px x 900px) และเบราว์เซอร์ซูมเป็น 175% แล้วองค์ประกอบ "bootstrap-ped" จะถูกซ้อนกัน

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">class="col-lg-4"</div>
        <div class="col-lg-4">class="col-lg-4"</div>
    </div>
</div>

Chrome ซูม 100%

เบราว์เซอร์ 100 เปอร์เซ็นต์ - องค์ประกอบวางในแนวนอน

Chrome ซูม 175%

เบราว์เซอร์ 175 เปอร์เซ็นต์ - องค์ประกอบที่ซ้อนกัน

มาเริ่ม Bootstrap กันเถอะ!

สังเกตว่าcol-smใช้ความกว้าง 100% (ในคำอื่น ๆ แบ่งเป็นบรรทัดใหม่) ด้านล่าง576pxแต่colไม่ได้ คุณสามารถสังเกตเห็นความกว้างปัจจุบันที่ศูนย์กลางด้านบนใน gif

รหัสมาที่นี่:

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

Bootstrap ตามค่าเริ่มต้นจัดเรียงคอลัมน์ทั้งหมด(col) ในแถวเดียวที่มีความกว้างเท่ากัน ในกรณีนี้สามcolจะครอบครอง 100% / 3 ความกว้างแต่ละสิ่งขนาดหน้าจอ คุณสามารถสังเกตเห็นว่าใน gif

ตอนนี้ถ้าเราต้องการที่จะแสดงเพียงหนึ่งคอลัมน์ต่อบรรทัดคือให้ความกว้าง 100% กับแต่ละคอลัมน์ แต่สำหรับหน้าจอขนาดเล็กเท่านั้น ? ตอนนี้มาcol-xxชั้นเรียนมา!

ฉันใช้col-smเพราะฉันต้องการแยกคอลัมน์ออกเป็นเส้นที่แยกกันใต้ 576px 4 เหล่านี้col-xxBootstrapคลาสมีให้สำหรับอุปกรณ์แสดงผลที่แตกต่างกันเช่นโทรศัพท์มือถือแท็บเล็ตแล็ปท็อปจอภาพขนาดใหญ่เป็นต้น

ดังนั้น, col-smจะต่ำกว่า 576px, col-mdจะต่ำกว่า 768px, col-lgจะต่ำกว่า 992px และcol-xlจะต่ำกว่า 1200px

โปรดทราบว่าไม่มีcol-xsคลาสใน bootstrap 4

ผลรวมค่อนข้างสวย คุณสามารถกลับไปทำงานได้

แต่มีมากกว่านั้น ตอนนี้มาcol-*และcol-xx-*สำหรับการกำหนดความกว้าง

โปรดจำไว้ในตัวอย่างข้างต้นที่ฉันกล่าวถึงcolหรือcol-xxใช้ความกว้างเท่ากันในแถว ดังนั้นหากเราต้องการเพิ่มความกว้างให้เฉพาะcolเราสามารถทำสิ่งนี้ได้

แถว Bootstrap แบ่งออกเป็น 12 ส่วนดังนั้นในตัวอย่างด้านบนมี 3 colดังนั้นแต่ละอันใช้เวลา 12/3 = 4 ส่วน คุณสามารถพิจารณาชิ้นส่วนเหล่านี้เป็นวิธีการวัดความกว้าง

นอกจากนี้เรายังสามารถเขียนว่าในรูปแบบcol-*เช่นcol-4นี้:

<div class="row">
  <div class="col-4">col</div>
  <div class="col-4">col</div>
  <div class="col-4">col</div>
</div>

และมันก็ไม่ได้สร้างความแตกต่างเพราะโดยปกติแล้ว bootstrap จะให้ความกว้างเท่ากัน col (4 + 4 + 4 = 12)

แต่ถ้าเราต้องการให้ 7 ส่วนกับส่วนที่ 1 col, 3 ส่วนกับส่วนที่ 2 colและส่วนที่เหลือ 2 (12-7-3 = 2) ถึงส่วนที่ 3 col(7 + 3 + 2 ดังนั้นทั้งหมดคือ 12) เราสามารถทำได้ดังนี้:

<div class="row">
  <div class="col-7">col-7</div>
  <div class="col-3">col-3</div>
  <div class="col-2">col-2</div>
</div>

และคุณสามารถปรับแต่งความกว้างของcol-xx-*คลาสได้เช่นกัน

<div class="row">
    <div class="col-sm-7">col-sm-7</div>
    <div class="col-sm-3">col-sm-3</div>
    <div class="col-sm-2">col-sm-2</div>
</div>

มันมีลักษณะอย่างไรในการกระทำ?

เกิดอะไรขึ้นถ้าผลรวมของcolมากกว่า 12? จากนั้นcolจะเลื่อน / ปรับเป็นบรรทัดด้านล่าง ใช่อาจมีคอลัมน์จำนวนเท่าใดก็ได้สำหรับแถว!

<div class="row">
        <div class="col-12">col-12</div>
        <div class="col-9">col-9</div>
        <div class="col-6">col-6</div>
        <div class="col-6">col-6</div>
    </div>

ถ้าเราต้องการ 3 คอลัมน์ในแถวสำหรับหน้าจอขนาดใหญ่ แต่แยกคอลัมน์เหล่านี้ออกเป็น2 แถวสำหรับหน้าจอขนาดเล็ก

<div class="row">
    <div class="col-12 col-sm">col-12 col-sm TOP</div>
    <div class="col col-sm">col col-sm</div>
    <div class="col col-sm">col col-sm</div>
</div>

คุณสามารถเล่นได้ที่นี่: https://jsfiddle.net/JerryGoyal/6vqno0Lm/

ฉันคิดว่าภาพนี้ค่อนข้างดีที่จะเข้าใจแนวคิดที่ดีกว่า!

สำหรับความเข้าใจรายละเอียดเพิ่มเติมโปรดไปที่ลิงค์ด้านล่าง:

https://getbootstrap.com/docs/3.4/css/

มันใช้ในการบอก bootstrap ว่ามีคอลัมน์จำนวนเท่าใดที่จะถูกวางในแถวตามขนาดหน้าจอ -

col-xs-2

จะแสดงเพียง 2 คอลัมน์ในแถวในหน้าจอขนาดเล็กพิเศษ (xs) ในลักษณะเดียวกับ sm กำหนดหน้าจอขนาดเล็ก md (ขนาดกลาง), lg (ขนาดใหญ่), แต่ตาม bootstrap กฎข้อแรกที่เล็กกว่าถ้าคุณพูดถึง

xs-col-2 md-col-4

จากนั้นจะแสดงคอลัมน์ 2 คอลัมน์ในทุกแถวสำหรับขนาดหน้าจอตั้งแต่ xs จนถึง sm (รวมอยู่) และการเปลี่ยนแปลงเมื่อมีขนาดถัดไปเช่นสำหรับ md จนถึง lg (รวมอยู่) เพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับขนาดหน้าจอลองใช้ในโหมดหน้าจอต่างๆ โหมดนักพัฒนาซอฟต์แวร์ของ chrome (ctr + shift + i) และลองใช้พิกเซลหรืออุปกรณ์ต่างๆ