ความหมายของตัวเลขใน“ col-md-4”,“ col-xs-1”,“ col-lg-2” ใน Bootstrap

ฉันสับสนกับระบบกริดใน Bootstrap ใหม่โดยเฉพาะคลาสเหล่านี้:

col-lg-*
col-md-*
col-xs-*

(โดยที่ * หมายถึงบางหมายเลข)

ทุกคนสามารถอธิบายได้ดังต่อไปนี้:

1. อย่างไรตัวเลขที่อยู่ในการจัดตำแหน่งกริด?
2. อย่างไรใช้ตัวเลขเหล่านี้
3. สิ่งที่พวกเขาเป็นตัวแทนจริง ๆ ?

ใช้กับ Bootstrap 3 เท่านั้น

ละเว้นตัวอักษร (x s , SM , MD , LG ) สำหรับตอนนี้ ,ฉันจะเริ่มต้นมีเพียงตัวเลข ...

• ตัวเลข (1-12) หมายถึงส่วนของความกว้างทั้งหมดของ div ใด ๆ
• div ทั้งหมดแบ่งออกเป็น 12 คอลัมน์
• ดังนั้นจึงcol-*-6ครอบคลุม 6 จาก 12 คอลัมน์ (ครึ่งหนึ่งของความกว้าง), col-*-12ครอบคลุม 12 จาก 12 คอลัมน์ (ทั้งความกว้าง), เป็นต้น

ดังนั้นถ้าคุณต้องการให้คอลัมน์สองคอลัมน์เท่ากันเพื่อหาร div ให้เขียน

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

หรือถ้าคุณต้องการให้คอลัมน์ที่ไม่เท่ากันสามคอลัมน์ครอบคลุมความกว้างเดียวกันนั้นคุณสามารถเขียน:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

คุณจะสังเกตเห็นว่าจำนวน # ของคอลัมน์รวมกันได้มากถึง 12 ซึ่งอาจน้อยกว่าสิบสองคอลัมน์ แต่ระวังถ้ามีมากกว่า 12 เนื่องจากกองที่กระทำผิดของคุณจะชนไปยังแถวถัดไป (ไม่ใช่.rowซึ่งเป็นอีกเรื่องหนึ่ง)

นอกจากนี้คุณยังสามารถซ้อนคอลัมน์ภายในคอลัมน์ (ควรใช้.rowตัวล้อมรอบ) เช่น:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Divs ที่ซ้อนกันแต่ละชุดจะขยายได้ถึง 12 คอลัมน์ของ div parent หมายเหตุ:เนื่องจากแต่ละ.colคลาสมีช่องว่างภายใน 15px ทั้งสองด้านคุณจึงควรห่อคอลัมน์แบบซ้อนใน a.rowล้อมซึ่งมีระยะขอบ -15px วิธีนี้จะช่วยหลีกเลี่ยงการทำสำเนาภายในและทำให้เนื้อหาเรียงซ้อนกันระหว่างคลาส col ที่ซ้อนกันและไม่ซ้อนกัน

- คุณไม่ได้ถามถึงการxs, sm, md, lgใช้งานเป็นพิเศษ แต่มันไปด้วยกันดังนั้นฉันเลยอดไม่ได้ที่จะแตะมัน ...

กล่าวโดยย่อคือใช้เพื่อกำหนดขนาดหน้าจอที่คลาสควรใช้:

• xs = หน้าจอขนาดเล็กพิเศษ (โทรศัพท์มือถือ)
• เอสเอ็ม = หน้าจอขนาดเล็ก (แท็บเล็ต)
• md = หน้าจอขนาดกลาง (เดสก์ท็อปบางตัว)
• lg = หน้าจอขนาดใหญ่ (เดสก์ท็อปที่เหลือ)

อ่านบท" Grid Options " จากเอกสาร Bootstrap อย่างเป็นทางการสำหรับรายละเอียดเพิ่มเติม

โดยปกติคุณควรจัดหมวดหมู่ div โดยใช้คลาสคอลัมน์หลายคอลัมน์เพื่อให้ทำงานแตกต่างกันไปขึ้นอยู่กับขนาดหน้าจอ (นี่คือหัวใจของสิ่งที่ทำให้ bootstrap ตอบสนอง) เช่น: div ที่มีคลาสcol-xs-6และcol-sm-4จะขยายหน้าจอครึ่งหนึ่งบนโทรศัพท์มือถือ (xs) และ 1/3 ของหน้าจอบนแท็บเล็ต (sm)

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

หมายเหตุ:ตามความคิดเห็นด้านล่างเรียนตารางสำหรับขนาดหน้าจอที่ได้รับนำไปใช้กับขนาดหน้าจอที่ใหญ่และประกาศอื่นเว้นแต่แทนที่มัน (เช่นcol-xs-6 col-md-4ช่วง 6 คอลัมน์ในxs และsmและ 4 คอลัมน์ในmd และlgแม้ว่าsmและlgไม่เคยถูกประกาศอย่างชัดเจน)

หมายเหตุ:ถ้าคุณไม่ได้กำหนดxsก็จะเริ่มต้นcol-xs-12(เช่นcol-sm-6เป็นครึ่งหนึ่งของความกว้างบนsm, mdและlgหน้าจอ แต่เต็มความกว้างบนxsหน้าจอ)

หมายเหตุ:จริง ๆ แล้วมันก็โอเคถ้าคุณ.rowมีมากกว่า 12 คอลตราบใดที่คุณรู้ว่าพวกมันจะตอบสนองอย่างไร - นี่เป็นปัญหาที่ถกเถียงกันและทุกคนไม่เห็นด้วย

ระบบกริด Bootstrap มีสี่คลาส:
xs (สำหรับโทรศัพท์)
sm (สำหรับแท็บเล็ต)
md (สำหรับเดสก์ท็อป)
lg (สำหรับเดสก์ท็อปขนาดใหญ่)

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

เคล็ดลับ:แต่ละชั้นมีขนาดเพิ่มขึ้นดังนั้นหากคุณต้องการตั้งค่าความกว้างเท่ากันสำหรับ xs และ sm คุณจะต้องระบุ xs เท่านั้น

ตกลงคำตอบนั้นง่าย แต่อ่านได้ที่:

col-lg-ย่อมาจากคอลัมน์ขนาดใหญ่≥ 1200px
col-md-หมายถึงคอลัมน์ขนาดกลาง≥ 992px
col-xs-หมายถึงคอลัมน์ขนาดเล็กพิเศษ≥ 768px

จำนวนพิกเซลเป็นจุดพักดังนั้นตัวอย่างเช่นcol-xsกำหนดเป้าหมายองค์ประกอบเมื่อหน้าต่างมีขนาดเล็กกว่า768px (อุปกรณ์เคลื่อนที่น่าจะเป็น) ...

ฉันยังสร้างภาพด้านล่างนี้เพื่อแสดงให้เห็นว่าการทำงานของระบบกริดในตัวอย่างนี้ผมใช้พวกเขามี 3 เช่นเดียวกับcol-lg-6ที่จะแสดงให้คุณเห็นวิธีการทำงานของระบบกริดในเพจดูที่วิธีการlg, mdและxsมีการตอบสนองกับขนาดหน้าต่าง:

ประเด็นหลักคือ:

col-lg-* col-md-* col-xs-* col-sm กำหนดจำนวนคอลัมน์ที่จะมีในขนาดหน้าจอที่แตกต่างกันเหล่านี้

ตัวอย่าง: ถ้าคุณต้องการให้มีสองคอลัมน์ในหน้าจอเดสก์ท็อปและในหน้าจอโทรศัพท์คุณใส่สองcol-md-6และสองcol-xs-6คลาสในคอลัมน์ของคุณ

หากคุณต้องการให้มีสองคอลัมน์ในหน้าจอเดสก์ท็อปและมีเพียงหนึ่งคอลัมน์ในหน้าจอโทรศัพท์ (เช่นสองแถวที่ซ้อนกันอยู่ด้านบนของกันและกัน) คุณใส่two col-md-6และสองcol-xs-12คอลัมน์ในคอลัมน์ของคุณและเนื่องจากผลรวมจะเท่ากับ 24 อื่น ๆ หรือเพียงแค่ปล่อยxsสไตล์

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

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

อ่านเพิ่มเติม ...

ไปเลย

col-lg-2: หากหน้าจอมีขนาดใหญ่ ( lg ) ส่วนประกอบนี้จะใช้พื้นที่2 องค์ประกอบเนื่องจากทั้งแถวสามารถใส่ได้ 12 องค์ประกอบ (ดังนั้นคุณจะเห็นว่าบนหน้าจอขนาดใหญ่ส่วนประกอบนี้ใช้พื้นที่ 16% ของแถว)

col-lg-6: หากหน้าจอมีขนาดใหญ่ ( lg ) ส่วนประกอบนี้จะใช้พื้นที่6 องค์ประกอบเนื่องจากทั้งแถวสามารถใส่ 12 องค์ประกอบได้ - เมื่อนำไปใช้คุณจะเห็นว่าส่วนประกอบมีพื้นที่ว่างครึ่งหนึ่งในแถว

กฎข้างต้นจะใช้เฉพาะเมื่อหน้าจอมีขนาดใหญ่ เมื่อหน้าจอมีขนาดเล็กกฎนี้จะถูกยกเลิกและจะแสดงเพียงองค์ประกอบเดียวต่อแถว

ภาพด้านล่างแสดงความกว้างขนาดหน้าจอต่างๆ: