Bootstrap 3 และ 4 .container-fluid พร้อมกริดเพิ่มช่องว่างที่ไม่ต้องการ

Question 1

ฉันต้องการให้เนื้อหาของฉันลื่นไหล แต่เมื่อใช้.container-fluidกับตารางของ Bootstrap ฉันยังคงเห็นช่องว่างภายใน

ฉันจะกำจัดช่องว่างภายในได้อย่างไร?

ฉันเห็นว่าฉันไม่ได้รับช่องว่าง.rowภายใน แต่ฉันต้องการเพิ่มคอลัมน์และทันทีที่ฉันทำช่องว่างภายในจะกลับมา

ฉันต้องการให้สามารถใช้คอลัมน์ได้เต็มความกว้าง

ตัวอย่าง:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

วิธีแก้ไขฉันมี:

แทนที่ bootstrap.css, linke 1427 & 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

ถึง

padding-right: 0px;
padding-left: 0px;

Question 2

คุณควรเพิ่ม "แถว" ในแต่ละคอนเทนเนอร์ซึ่งจะ "แก้ไข" ปัญหานี้!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

ดูhttp://jsfiddle.net/3px20h6t/

Question 3

โปรดค้นหา css จริงจาก Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

เมื่อคุณเพิ่ม.container-fluidชั้นเรียนมันจะเพิ่มช่องว่างในแนวนอนเป็น 15px และสิ่งเดียวกันนี้จะถูกลบออกเมื่อคุณเพิ่ม.rowชั้นเรียนเป็นองค์ประกอบลูกด้วยระยะขอบเชิงลบที่กำหนดไว้ในแถว

Question 4

5 ปีผ่านไปและค่อนข้างแปลกที่มีคำตอบมากมายที่ไม่เป็นไปตาม (หรือผิดกฎ ) หรือไม่ตอบคำถามจริงๆ ...

คำตอบสั้น ๆ :
เพียงใช้no-guttersคลาสBootstrap ในแถวของคุณเพื่อลบช่องว่างภายใน:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(นอกจากนี้คุณลืมเพิ่ม</div>ไว้ท้ายไฟล์ของคุณได้รับการแก้ไขในโค้ดด้านบนเช่นกัน)

บันทึก:

มีหลายกรณีที่คุณต้องการลบช่องว่างภายในของคอนเทนเนอร์ด้วยเช่นกัน ในกรณีนี้พิจารณาลดลง.containerหรือ.container-fluidเรียนตามคำแนะนำของเอกสาร

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

คำตอบยาว:

การพายเรือที่คุณได้รับมีการบันทึกไว้ในเอกสารของ Bootstrap :

แถวคือ Wrapper สำหรับคอลัมน์ แต่ละคอลัมน์มีช่องว่างในแนวนอน (เรียกว่ารางน้ำ) สำหรับควบคุมช่องว่างระหว่างกัน จากนั้นช่องว่างภายในนี้จะถูกตอบโต้กับแถวที่มีระยะขอบติดลบ ด้วยวิธีนี้เนื้อหาทั้งหมดในคอลัมน์ของคุณจะถูกจัดวางไว้ทางด้านซ้าย

และเกี่ยวกับวิธีแก้ปัญหาซึ่งได้รับการบันทึกไว้ด้วย:

คอลัมน์มีช่องว่างในแนวนอนเพื่อสร้างรางระหว่างแต่ละคอลัมน์อย่างไรก็ตามคุณสามารถลบระยะขอบออกจากแถวและช่องว่างภายในคอลัมน์ด้วย. no -guttersบน.

เกี่ยวกับการทิ้งภาชนะ:

ต้องการการออกแบบที่ล้ำสมัยหรือไม่? วางพาเรนต์ .container หรือ. container-fluid

โบนัส: เกี่ยวกับข้อผิดพลาดที่พบในคำตอบอื่น ๆ

หลีกเลี่ยงการแฮ็กคลาสคอนเทนเนอร์ของ bootstrap แทนที่จะตรวจสอบให้แน่ใจว่าคุณได้ใส่เนื้อหาทั้งหมดไว้ในcol-s และห่อด้วยrow-s ตามที่เอกสารระบุว่า:

ในเค้าโครงตารางเนื้อหาต้องวางไว้ในคอลัมน์และเฉพาะคอลัมน์เท่านั้นที่สามารถเป็นลูกของแถวได้

หากคุณยังคงต้องทำการแฮ็ค (ในกรณีที่มีคนทำสิ่งต่าง ๆ ไปแล้วและคุณต้องแก้ไขปัญหาของคุณอย่างรวดเร็ว) ลองใช้ Bootstrap px-0สำหรับการลบแพดเดิลแนวนอนแทนpl-0 pr-0หรือสร้างสไตล์ของคุณใหม่

Question 5

ดังนั้นนี่คือสรุปสั้น ๆ สำหรับ Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

มันใช้ได้กับฉัน

Question 6

ฉันคิดว่าฉันมีข้อกำหนดเช่นเดียวกับ Tim แต่ไม่มีคำตอบใดที่ให้สำหรับคอลัมน์แบบ edge-to-edge ของวิวพอร์ตพร้อมโซลูชันรางน้ำภายในแบบปกติ หรือวิธีอื่นในการวาง: ฉันจะทำให้คอลัมน์แรกและคอลัมน์สุดท้ายเจาะเข้าไปในช่องว่างของคอนเทนเนอร์และไหลไปที่ขอบของวิวพอร์ตได้อย่างไรในขณะที่ยังคงรักษารางน้ำระหว่างคอลัมน์ไว้

จากสิ่งที่ฉันสามารถบอกได้ว่าไม่มีวิธีแก้ปัญหาที่เรียบร้อยและสะอาด นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน แต่มันก็อยู่นอกสิ่งที่ Bootstrap จะรองรับ แต่ใช้งานได้ในขณะนี้ (Bootstrap 3.3.5 & 4.0-alpha)

http://www.bootply.com/ioWBaljBAd

HTML ตัวอย่าง:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

เคล็ดลับคือการซ้อนdivระหว่างแถวและคอลัมน์เพื่อสร้างระยะขอบ -15px พิเศษเพื่อดันเข้าไปในช่องว่างภายในคอนเทนเนอร์ ขอบลบพิเศษจะสร้างการเลื่อนแนวนอน (เป็นช่องว่าง) บนวิวพอร์ตขนาดเล็ก เพิ่มoverflow-x: hiddenไปยัง.rowจำเป็นต้องมีการปราบปราม

ใช้งานได้เช่นเดียว.container-fluidกับ.container.

Question 7

ทำไมไม่ลบช่องว่างภายในที่เพิ่มโดยตู้คอนเทนเนอร์โดยทำเครื่องหมายช่องว่างด้านซ้ายและด้านขวาเป็น 0

<div class="container-fluid pl-0 pr-0">

วิธีที่ดีกว่านี้? ไม่มีช่องว่างในระดับภาชนะ (สะอาดกว่า)

<div class="container-fluid pl-0 pr-0">

Question 8

คุณต้องการคุณสมบัติ CSS เหล่านี้ในคลาส Bootstrap ของ. คอนเทนเนอร์เท่านั้นและคุณสามารถวางระบบกริดปกติไว้ในตัวเขาได้โดยไม่ต้องมีใครสักคนเนื้อหาของคอนเทนเนอร์จะไม่อยู่ในตัวเขา (โดยไม่มี scroll-x ในวิวพอร์ต)

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

Question 9

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

การเว้นคลาสยูทิลิตี้

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0และpr-0จะลบช่องว่างที่นำหน้าและต่อท้ายออกจากคอลัมน์ ปัญหาหนึ่งที่เหลือคือแถวที่ฝังของคอลัมน์เนื่องจากยังคงมีระยะขอบติดลบ ในกรณีนี้:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

ความแตกต่างของเวอร์ชัน

4.0.0-alpha.4นอกจากนี้ยังทราบสาธารณูปโภคระยะห่างชั้นเรียนมีการเปลี่ยนแปลงตั้งแต่รุ่น ก่อนที่จะถูกแยกจากกันโดย 2 ขีดกลางเช่น => p-x-0และp-l-0และอื่น ๆ ...

เพื่อให้อยู่ในหัวข้อสำหรับเวอร์ชัน 3: นี่คือสิ่งที่ฉันใช้ในโครงการ Bootstrap 3 และรวมการตั้งค่าเข็มทิศสำหรับยูทิลิตี้การเว้นระยะห่างนี้ในbootstrap-sass(เวอร์ชัน 3) หรือbootstrap(เวอร์ชัน 4.0.0-alpha.3) ด้วยเครื่องหมายขีดกลางสองครั้งหรือbootstrap (เวอร์ชัน 4.0.0-alpha.4 ขึ้นไป) พร้อมขีดกลางเดียว

นอกจากนี้เวอร์ชันล่าสุดยังเพิ่มขึ้นถึง 5 เท่าของอัตราส่วน (เช่นpt-5padding-top 5) แทนที่จะเป็นเพียง 3

เข็มทิศ

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

เอาต์พุต CSS

คุณสามารถแน่นอนคัดลอก / วางคลาสระยะห่าง padding จากไฟล์ css ที่สร้างขึ้น

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Question 10

ฉันคิดว่าไม่มีใครให้คำตอบที่ถูกต้องสำหรับคำถามนี้ วิธีแก้ปัญหาของฉันคือ: 1. เพียงแค่ประกาศคลาสอื่นพร้อมกับตัวอย่างคลาส container-fluid (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

ขยายข้อมูลโค้ด

จากนั้นใช้ความจำเพาะในส่วน css ทำสิ่งนี้:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

ขยายข้อมูลโค้ด

วิธีนี้จะได้ผล 100% และจะลบช่องว่างภายในจากซ้ายและขวา ฉันหวังว่านี่จะช่วยได้.

Question 11

หากคุณกำลังทำงานกับการกำหนดค่าคุณสามารถตั้งค่า@grid-gutter-widthจาก30pxเป็น0

Question 12

ฉันได้ใช้<div class="container-fluid" style="padding: 0px !important"> และดูเหมือนว่าจะได้ผล

Question 13

ฉันดิ้นรนกับเรื่องนี้ด้วยตัวเองและในที่สุดฉันก็เชื่อว่าฉันได้คิดออกแล้ว เป็นเรื่องเหลือเชื่อที่คำถามนี้มีคำตอบที่ล้มเหลวมากมาย

สิ่งที่คุณต้องทำคือถอดช่องว่างภายในออกจากองค์ประกอบ. col ทั้งหมดของคุณและนำช่องว่างภายในออกจาก. container-fluid

ฉันทำสิ่งนี้ในโปรเจ็กต์ของตัวเองเล็กน้อยโดยเพิ่มสิ่งต่อไปนี้ในไฟล์ css ของฉัน:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

ฉันมีขนาด col ที่แตกต่างกันเพื่อใช้สำหรับขนาด col ที่แตกต่างกันทั้งหมดที่ฉันใช้ ฉันมั่นใจว่ามีวิธีที่สะอาดกว่าในการเขียน css แต่นี่แสดงให้เห็นถึงผลลัพธ์สุดท้าย

Question 14

ใช้px-0บนcontainerและno-guttersบนrowเพื่อถอดพายออก

อ้างจากBootstrap 4 - ระบบกริด :

แถวคือ Wrapper สำหรับคอลัมน์ แต่ละคอลัมน์มีช่องว่างในแนวนอน (เรียกว่ารางน้ำ) สำหรับควบคุมช่องว่างระหว่างกัน จากนั้นช่องว่างภายในนี้จะถูกตอบโต้กับแถวที่มีระยะขอบติดลบ ด้วยวิธีนี้เนื้อหาทั้งหมดในคอลัมน์ของคุณจะถูกจัดวางไว้ทางด้านซ้าย

คอลัมน์มีช่องว่างในแนวนอนเพื่อสร้างท่อระบายน้ำระหว่างแต่ละคอลัมน์ แต่คุณสามารถลบขอบจากแถวและ padding จากคอลัมน์ที่มีใน.no-gutters.row

ต่อไปนี้คือการสาธิตสด:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

ขยายข้อมูลโค้ด

เหตุผลนี้ใช้งานได้container-fluidและcolทั้งสองมีช่องว่างภายในดังนี้:

padding-right: 15px;
padding-left: 15px;

px-0สามารถถอดช่องว่างในแนวนอนออกcontainer-fluidและno-guttersถอดช่องว่างภายในออกcolได้