Bootstrap 3 - ทำไมคลาสแถวจึงกว้างกว่าคอนเทนเนอร์?

116

ฉันเพิ่งเริ่มใช้ Bootstrap 3 ฉันมีช่วงเวลาที่ยากลำบากในการทำความเข้าใจว่าคลาสแถวทำงานอย่างไร มีวิธีหลีกเลี่ยงpadding-leftและpadding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3

— Petran
แหล่งที่มา

@Adrift นี่ยังจริงหรือ? ฉันไม่แน่ใจว่าคุณหมายความว่าพวกเขาทำงานไม่ถูกต้องหรือไม่เพราะฉันใช้มันและดูเหมือนจะได้ผลเท่าที่ควร

— ธัญพืช

1

@ ธัญพืช: ไม่อีกแล้ว สิ่งนี้ถูกเพิ่มใน v3.0.2

— adrift

3

เนื่องจากแถว bootstrap มีระยะขอบซ้ายและขวา -15px

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

— The One True Colter

151

ในระบบกริดทั้งหมดจะมีรางน้ำระหว่างแต่ละคอลัมน์ ระบบของ Bootstrap ตั้งค่าช่องว่าง 15px ทั้งด้านซ้ายและด้านขวาของแต่ละคอลัมน์เพื่อสร้างรางน้ำนี้

ปัญหาคือคอลัมน์แรกไม่ควรมีรางน้ำครึ่งหนึ่งทางด้านซ้ายและสุดท้ายไม่ควรมีรางน้ำครึ่งหนึ่งทางด้านขวา แทนที่จะใช้บางประเภท.firstหรือ.lastคลาสในคอลัมน์เหล่านั้นเหมือนระบบกริดบางระบบพวกเขาตั้งค่า.rowคลาสให้มีระยะขอบลบที่ตรงกับช่องว่างภายในของคอลัมน์แทน สิ่งนี้จะ "ดึง" รางน้ำออกจากคอลัมน์แรกและคอลัมน์สุดท้ายในขณะเดียวกันก็ทำให้กว้างขึ้นด้วย

.rowdiv ควรไม่เคยนำมาใช้เพื่อระงับการอื่นใดนอกเหนือจากคอลัมน์ตาราง หากเป็นเช่นนั้นคุณจะเห็นเนื้อหาที่เปลี่ยนไปเมื่อเทียบกับคอลัมน์ใด ๆ ดังที่เห็นได้ชัดในซอของคุณ

UPDATE:

คุณปรับเปลี่ยนคำถามของคุณหลังจากที่ฉันตอบดังนั้นนี่คือคำตอบของคำถามที่คุณถามตอนนี้: เพิ่มระดับแรก.container <div>ดูตัวอย่างการทำงาน

— ฌอนไรอัน
แหล่งที่มา

2

คอลัมน์ตารางถูกคั่นด้วยช่องว่างภายในไม่ใช่ระยะขอบ (ใน BS3)

— ลอยตัว

3

ที่ดี! ซึ่งจะอธิบายถึงเนื้อหาที่มากล้นทั้งหมด

— Rutwick Gangurde

27

ด้วย bootstrap 3.3.7 ปัญหานี้ได้รับการแก้ไขโดยการห่อ. row ด้วย. container-fluid

— dbarma
แหล่งที่มา

สิ่งนี้ใช้ได้ผลสำหรับฉันแม้ว่าในตอนแรกฉันคิดว่ามันไม่เป็นเช่นนั้นนั่นเป็นเพราะฉันเปิดเว็บคอนโซลของนักพัฒนาซึ่งจะช่วยลดความกว้าง แต่ก็ทำให้สิ่งนี้ยุ่งเหยิง การใช้.container-fluidก็บอกนี่: stackoverflow.com/a/23616447/5272567

— แมทเธีย

ทำงานมากเกินไปเมื่อ div absoluteห่อเป็นตำแหน่ง ขอบคุณสำหรับคำใบ้

— InsOp

ถ้าฉันสามารถโหวตคำตอบนี้ได้หลายครั้ง ... :)

— rony36

การแก้ไขเดียวกันสำหรับ Bootstrap 4

— Rob L

19

ดูคำตอบของฉันด้านล่างสำหรับโพสต์ที่คล้ายกัน

เหตุใด bootstrap .row จึงมีระยะขอบซ้ายเริ่มต้นที่ -30px

โดยทั่วไปคุณใช้ "clearfix" แทน "row" มันจะเหมือนกับ "แถว" ทุกประการโดยไม่รวมขอบลบ

— ไคล์
แหล่งที่มา

2

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

— Todd Baur

วิธีนี้จะแก้ไขเนื้อหาที่ล้นออกมานอกกระดาษห่อ

— Bhojendra Rauniyar

แต่วิธีที่ดีกว่าคือห่อแถวด้วยภาชนะ

— Bhojendra Rauniyar

เร็วที่สุด! UP!

— Anderson Bressane

18

ฉันใช้คลาสแถวภายในคลาสคอนเทนเนอร์และยังมีปัญหาอยู่ เมื่อฉันเพิ่มเข้าmargin-left: auto; margin-right: auto;ใน.rowชั้นเรียนมันก็ใช้ได้ดี

— เจฟฟรีย์
แหล่งที่มา

8

สิ่งนี้ได้ผลอย่างมีเสน่ห์! การเพิ่มคลาส 'mx-auto' ใน bootstrap 4 ช่วยแก้ไขปัญหาล้นสำหรับฉัน

— Michelle M.

3

@Michelle M. ควรได้รับเครดิตเต็มรูปแบบสำหรับคำตอบนี้
เธอกล่าวในหนึ่งในความคิดเห็น:

การเพิ่มคลาส 'mx-auto' ใน bootstrap 4 ช่วยแก้ไขปัญหาล้นสำหรับฉัน

คุณจะต้องอัปเดตdivองค์ประกอบแรกของคุณดังนี้:

<div class="row mx-auto" style="background:#000000">

ไม่จำเป็นต้องทำสิ่งนี้กับ Nested-Rows ทั้งหมด (ถ้าคุณมี)
เพียงเพิ่มmx-autoไปที่ด้านนอกสุดrow(หรือแถว) เพื่อหลีกเลี่ยง Vertical-Scrollbar
อย่าแทนที่พฤติกรรมของ Bootstrap Rows ทั้งหมดโดยการเพิ่มคลาส "row" เพื่อแทนที่ Margins

— MikeTeeVee
แหล่งที่มา

1

สำหรับนักพัฒนาในอนาคตที่แก้ไขปัญหานี้:

Bootstrap ตั้งค่าช่องว่างภายในสำหรับคอลัมน์แถวดังนั้นจึงไม่ควรมีเนื้อหาของแถวใดปรากฏนอกคอนเทนเนอร์ หากคุณประสบปัญหานี้และคุณใช้ระบบกริดของ bootstrap อย่างถูกต้องโดยใช้คลาส col -... เป็นไปได้ว่าคุณมี CSS เพิ่มเติมบางแห่งที่รีเซ็ตช่องว่างในคอลัมน์

— JSideris
แหล่งที่มา

หรือคุณมี Bootstrap เวอร์ชันเก่า ตัวอย่างเช่น 3.0.0 ที่แจกจ่ายด้วย VS2015 ดูgithub.com/twbs/bootstrap/issues/8959

— Adventure