คอนเทนเนอร์ของเหลวเทียบกับ. ภาชนะบรรจุ

เพิ่งดาวน์โหลด 3.1 และพบในเอกสาร ...

เปิดรูปแบบตารางใด ๆ ความกว้างคงเป็นรูปแบบเต็มความกว้างโดยการเปลี่ยนนอกสุดของคุณจะ.container.container-fluid

มองในbootstrap.cssก็ปรากฏว่าเป็นเหมือน.container-fluid .containerทั้งคู่มี CSS เหมือนกันและทุกอินสแตนซ์ของ.container-fluidจะถูกจับคู่กับ.containerและคลาสคอลัมน์ทั้งหมดจะถูกระบุเป็นเปอร์เซ็นต์

เมื่อ twiddling ด้วยตัวอย่างฉันไม่เห็นความแตกต่างใด ๆ

ขณะที่ฉันยังใหม่กับ Bootstrap ฉันคิดว่าฉันขาดอะไรไป ใครซักคนใช้เวลาสักครู่และสอนฉัน

ฉบับย่อ: .containerมีความกว้างคงที่หนึ่งสำหรับแต่ละขนาดหน้าจอใน bootstrap (xs, sm, md, lg); .container-fluidขยายเพื่อเติมความกว้างที่มี

ความแตกต่างระหว่างcontainerและcontainer-fluidมาจากบรรทัดของ CSS เหล่านี้:

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

ขึ้นอยู่กับความกว้างของวิวพอร์ตที่เว็บเพจกำลังดูอยู่containerคลาสจะให้ div ความกว้างคงที่เฉพาะเจาะจง ไม่มีบรรทัดเหล่านี้ในรูปแบบใด ๆcontainer-fluidดังนั้นความกว้างของมันจะเปลี่ยนแปลงทุกครั้งที่ความกว้างของวิวพอร์ตเปลี่ยนไป

ตัวอย่างเช่นสมมติว่าหน้าต่างเบราว์เซอร์ของคุณกว้าง 1,000px เนื่องจากสูงกว่าความกว้างต่ำสุดที่ 992px .containerองค์ประกอบของคุณจะมีความกว้าง 970px จากนั้นคุณค่อยๆขยายหน้าต่างเบราว์เซอร์ของคุณ ความกว้างของคุณ.containerจะไม่เปลี่ยนแปลงจนกว่าคุณจะไปที่ 1200px ซึ่งมันจะข้ามไปที่ความกว้าง 1170px และคงไว้ซึ่งความกว้างของเบราว์เซอร์ที่ใหญ่ขึ้น

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

ฉันคิดว่าคุณกำลังพูดว่าcontainervs container-fluidเป็นความแตกต่างระหว่างการตอบสนองและไม่ตอบสนองต่อกริด นี่ไม่เป็นความจริง ... สิ่งที่พูดคือความกว้างไม่คงที่ ... ความกว้างเต็ม!

นี่เป็นการยากที่จะอธิบายเพื่อให้ดูตัวอย่าง

ตัวอย่างที่หนึ่ง

container-fluid:

http://www.bootply.com/119981

ดังนั้นคุณจะเห็นว่าภาชนะที่จะขึ้นหน้าจอทั้งหมด ... container-fluidที่ของ

ตอนนี้ให้ดูที่อื่นเพียงปกติcontainerและดูขอบของตัวอย่าง

ตัวอย่างที่สอง

container

http://www.bootply.com/119982

ตอนนี้คุณเห็นพื้นที่สีขาวในตัวอย่างหรือไม่ นั่นเป็นเพราะความกว้างคงที่container! การเปิดตัวอย่างทั้งสองในแท็บสองแท็บที่แตกต่างกันและสลับไปมาเป็นเรื่องที่สมเหตุสมผล

แก้ไข

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

http://www.bootply.com/119983

ฉันหวังว่าสิ่งนี้จะช่วยชี้แจงเล็กน้อย!

ทั้งสอง.containerและ.container-fluidตอบสนอง (เช่นพวกเขาเปลี่ยนเค้าโครงตามความกว้างของหน้าจอ) แต่ในรูปแบบที่แตกต่างกัน (ฉันรู้ว่าการตั้งชื่อไม่ได้ทำให้มันเป็นอย่างนั้น)

คำตอบสั้น ๆ :

.container กำลังปรับขนาด jumpy / choppy และ

.container-fluid คือการปรับขนาดอย่างต่อเนื่อง / ปรับความกว้าง: 100%

จากมุมมองการทำงาน:

.container-fluidปรับขนาดอย่างต่อเนื่องในขณะที่คุณเปลี่ยนความกว้างของหน้าต่าง / เบราว์เซอร์ตามจำนวนใด ๆ โดยไม่ต้องเว้นพื้นที่ว่างด้านข้างเป็น.containerพิเศษ (ดังนั้นการตั้งชื่อ: "ของเหลว" ซึ่งตรงข้ามกับ "ดิจิตอล", "ไม่ต่อเนื่อง", "chunked" หรือ "เชิงปริมาณ")

.containerปรับขนาดเป็นชิ้นตามความกว้างที่แน่นอน กล่าวอีกนัยหนึ่งมันจะแตกต่างกันเฉพาะ aka "คงที่" ความกว้างช่วงที่แตกต่างกันของความกว้างหน้าจอ

ความหมาย: "ความกว้างคงที่"

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

จากมุมมองพื้นฐาน:

.container-fluidมีคุณสมบัติ CSS width: 100%;ดังนั้นจึงปรับใหม่อย่างต่อเนื่องในทุกความกว้างของหน้าจอ

.container-fluid {
  width: 100%;
}

.containerมีบางอย่างเช่น "width = 800px" (หรือ em, rem ฯลฯ ) ค่าความกว้างพิกเซลเฉพาะที่ความกว้างหน้าจอที่แตกต่างกัน หลักสูตรนี้เป็นสิ่งที่ทำให้ความกว้างขององค์ประกอบข้ามไปที่ความกว้างอื่นทันทีเมื่อความกว้างหน้าจอข้ามเกณฑ์ความกว้างของหน้าจอ และเกณฑ์นั้นจะถูกควบคุมโดยการสอบถามสื่อ CSS3 ซึ่งช่วยให้คุณสามารถใช้สไตล์ที่แตกต่างสำหรับเงื่อนไขต่าง ๆ เช่นช่วงความกว้างของหน้าจอ

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

เกิน

คุณสามารถสร้างองค์ประกอบที่ตอบสนองความกว้างคงที่ผ่านการสืบค้นสื่อไม่ใช่แค่.containerองค์ประกอบเนื่องจากเคียวรีสื่อเป็นวิธี.containerการที่นำมาใช้โดย bootstrap ในพื้นหลัง (ดูคำตอบของ JKillian สำหรับรหัส)

ใช้.container-fluidเมื่อคุณต้องการให้หน้าของคุณเปลี่ยนรูปแบบโดยมีความแตกต่างกันเล็กน้อยในขนาดวิวพอร์ต

ใช้.containerเมื่อคุณต้องการให้หน้าของคุณเปลี่ยนขนาดได้เพียง 4 ขนาดซึ่งรู้จักกันในชื่อ"เบรกพอยต์"

เบรกพอยต์ที่สอดคล้องกับขนาดของพวกเขาคือ:

• ขนาดเล็กพิเศษ: (เฉพาะความละเอียดของมือถือเท่านั้น)
• เล็ก: 768px (แท็บเล็ต)
• ปานกลาง: 992px (แล็ปท็อป)
• ใหญ่: 1200px (แล็ปท็อป / เดสก์ท็อป)

อัปเดตในปี 2019

ความแตกต่างพื้นฐานคือการที่containerเป็นเกล็ด responsively ขณะอยู่เสมอcontainer-fluid width:100%ดังนั้นในคำจำกัดความของรูท CSS มันจะเหมือนกัน แต่ถ้าคุณดูเพิ่มเติมคุณจะเห็นว่า.containerถูกผูกไว้กับเคียวรี่สื่อ

Bootstrap 4

containerมี 5 ความกว้าง ...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Bootstrap 3

containerมี 4 ขนาด ความกว้างเต็มรูปแบบบนxsหน้าจอจากนั้นความกว้างจะแตกต่างกันไปตามเคียวรีสื่อบันทึกต่อไปนี้ ..

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

คอนเทนเนอร์เทียบกับการสาธิตคอนเทนเนอร์ของเหลว

.containerมีค่าพิกเซลความกว้างสูงสุดในขณะที่.container-fluidความกว้างสูงสุด 100%

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

.container ปรับขนาดเป็นชิ้น ๆ ที่ความกว้างหลาย ๆ อันควบคุมโดยข้อความค้นหาสื่อ (โดยทางเทคนิคเราสามารถพูดได้ว่า "ความกว้างคงที่" เนื่องจากมีการระบุค่าพิกเซล แต่ถ้าคุณหยุดอยู่ตรงนั้นผู้คนอาจจะรู้สึกประทับใจว่าไม่สามารถเปลี่ยนขนาดได้ .)

จากมุมมองการแสดงผล.containerช่วยให้คุณควบคุมสิ่งที่ผู้ใช้เห็นได้มากขึ้นและทำให้ง่ายต่อการดูสิ่งที่ผู้ใช้จะเห็นเนื่องจากคุณมีจอแสดงผล 4 รูปแบบเท่านั้น (5 ในกรณีของ bootstrap 5) เนื่องจากขนาดเกี่ยวข้องกับ เหมือนกับขนาดกริด เช่น.col-xs, .col-sm, และ.col.col-lg

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

เมื่อใช้งาน.container-fluidเนื่องจาก witdh เกี่ยวข้องกับความกว้างของวิวพอร์ตจอแสดงผลเป็นแบบไดนามิกดังนั้นความแปรผันจึงยิ่งใหญ่กว่ามากและผู้ใช้ที่มีหน้าจอขนาดใหญ่มากหรือความกว้างหน้าจอผิดปกติอาจเห็นผลลัพธ์ที่คุณไม่ได้คาดหวัง

คุณอยู่ใน 3.1 .container-fluid และ. container เหมือนกันและทำงานเหมือน container แต่ถ้าคุณลบมันมันจะทำงานเหมือน. container-fluid (เต็มความกว้าง) พวกเขาลบ. container-fluid สำหรับ "Mobile First Approach" แต่ตอนนี้มันกลับมาใน 3.3.4 (และพวกเขาจะทำงานต่างออกไป)

ที่จะได้รับบูตล่าสุดโปรดอ่านโพสต์นี้ใน StackOverflow มันจะช่วยตรวจสอบออก