Bootstrap - การลบช่องว่างภายในหรือระยะขอบเมื่อขนาดหน้าจอเล็กลง

แก้ไข: บางทีฉันควรถามว่าตัวเลือกใดตั้งค่าช่องว่างด้านข้างเมื่อหน้าจอลดลงต่ำกว่าความกว้าง 480px? ฉันเรียกดู bootstrap-responsiveness.css มาระยะหนึ่งแล้วเพื่อค้นหาสิ่งนี้ แต่ดูเหมือนจะไม่มีผลกับสิ่งนี้

เดิม โดยทั่วไปแล้วฉันต้องการลบการเว้นระยะห่างเริ่มต้นหรือการตั้งค่าระยะขอบสำหรับการตอบสนองบนหน้าจออุปกรณ์ขนาดเล็ก

ฉันมีbackground colorทับบนcontainer-fluidตัวเลือกและหน้าจอขนาดใหญ่ทำให้พวกเขาได้อย่างสมบูรณ์แบบ 100% ตามความกว้างหน้าจอ แต่พวกเขาจะลดลงไปขนาดที่เล็กลงตามค่าเริ่มต้น Bootstrap ดูเหมือนว่าจะเพิ่มอัตรากำไรขั้นต้นหรือขยายบนหรือcontainer-fluidcontainer

<div class="container-fluid">
    <div class="row-fluid">
      test
    </div>
</div>

หากฉันใช้ css ที่กำหนดเองเพื่อเขียนทับสไตล์เริ่มต้นของ Bootstrap ฉันควรเขียนทับคิวรีสื่อหรือตัวเลือกใดเพื่อลบช่องว่างภายในนี้บนหน้าจอขนาดเล็ก

ข้อความค้นหา @media สำหรับ "โทรศัพท์" โดยเฉพาะคือ ..

@media (max-width: 480px) { ... }

แต่คุณอาจต้องการลบช่องว่าง / ระยะขอบสำหรับขนาดหน้าจอที่เล็กกว่า ตามค่าเริ่มต้น Bootstrap จะปรับระยะขอบ / ช่องว่างภายในให้กับร่างกายคอนเทนเนอร์และแถบนำทางที่ 978px

นี่คือคำถามบางส่วนที่ได้ผล (ในกรณีส่วนใหญ่) สำหรับฉัน:

@media (max-width: 978px) {
    .container {
      padding:0;
      margin:0;
    }

    body {
      padding:0;
    }

    .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
      margin-left: 0;
      margin-right: 0;
      margin-bottom:0;
    }
}

การสาธิต

อัพเดตสำหรับ Bootstrap 4

ใช้ยูทิลิตีการเว้นวรรคแบบตอบสนองใหม่ซึ่งช่วยให้คุณตั้งค่าช่องว่าง / ระยะขอบสำหรับความกว้างหน้าจอที่แตกต่างกัน (เบรกพอยต์): https://stackoverflow.com/a/43208888/171456

ปัญหาที่นี่ซับซ้อนกว่าการลบช่องว่างภายในคอนเทนเนอร์มากเนื่องจากโครงสร้างกริดอาศัยช่องว่างภายในนี้เมื่อใช้ระยะขอบลบสำหรับแถวที่ปิดล้อม

การลบช่องว่างภายในคอนเทนเนอร์ในกรณีนี้จะทำให้เกิดการล้นของแกน x ที่เกิดจากแถวทั้งหมดภายในคลาสคอนเทนเนอร์นี้ซึ่งเป็นหนึ่งในสิ่งที่โง่ที่สุดเกี่ยวกับ Bootstrap Grid

ตามหลักเหตุผลมันควรจะเข้าหาโดย

1. อย่าใช้.containerคลาสสำหรับสิ่งอื่นนอกจากแถว
2. สร้างโคลนของ.containerคลาสที่ไม่มีช่องว่างภายในสำหรับใช้กับ html ที่ไม่ใช่ตาราง
3. สำหรับการลบ.containerช่องว่างภายในมือถือคุณสามารถลบออกได้ด้วยตนเองด้วยการสืบค้นสื่อoverflow-x: hidden;ซึ่งไม่น่าเชื่อถือมากนัก แต่ใช้งานได้ในกรณีส่วนใหญ่

หากคุณใช้LESSผลลัพธ์สุดท้ายจะมีลักษณะเช่นนี้

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

เปลี่ยนคิวรีสื่อเป็นขนาดใดก็ได้ที่คุณต้องการกำหนดเป้าหมาย

ความคิดสุดท้ายฉันขอแนะนำให้ใช้Foundation FrameworkGrid เป็นขั้นสูง

เธรดนี้มีประโยชน์ในการค้นหาวิธีแก้ปัญหาในกรณีเฉพาะของฉัน (bootstrap 3)

@media (max-width: 767px) {
  .container-fluid, .row {
    padding:0px;
  }
  .navbar-header {
    margin:0px;
  }
}

ในการแก้ปัญหาเช่นนี้ฉันใช้ CSS - วิธีที่เร็วและง่ายที่สุดที่ฉันคิด ... เพียงแค่แก้ไขตามความต้องการของคุณ ...

@media only screen and (max-width: 480px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #your_id {width:000px;height:000px;}
}
@media only screen and (min-width: 959px) {
    #your_id {width:000px;height:000px;}
}

วิธีที่ฉันทำให้องค์ประกอบมีความกว้าง 100% ของอุปกรณ์คือใช้ระยะขอบซ้ายและขวาที่เป็นลบ ร่างกายมีช่องว่างภายใน 24px นั่นคือสิ่งที่คุณสามารถใช้ระยะขอบลบสำหรับ:

element{
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
}

ใน Bootstrap 4 ระยะขอบ 15px ที่คอนเทนเนอร์เริ่มต้นมีเรียงซ้อนลงไปที่แถวและคอลัมน์ทั้งหมด ดังนั้นสิ่งนี้ใช้ได้กับฉัน ...

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 5px;
        padding-right: 5px;
    }

    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        padding-left: 5px;
        padding-right: 5px;
    }
    .row.no-gutters {
        margin-left: 0;
        margin-right: 0;
    }
}

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

สำหรับ Bootstrap 3: คำตอบสำหรับฉันไม่ได้อยู่ในการเขียน css ใหม่สำหรับ. container-fluid, .row หรือการรีเซ็ตระยะขอบรูปแบบที่สอดคล้องกันที่ฉันรู้คือความยาวของคำที่ยาวขึ้นทำให้การออกแบบและการสร้างระยะขอบลดลงลง

ขั้นตอนการแก้ปัญหา:

1. ทดสอบเพจของคุณโดยการลบส่วนที่มีคอนเทนเนอร์ชั่วคราวและทดสอบไซต์ของคุณบนเบราว์เซอร์ขนาดเล็ก สิ่งนี้จะระบุที่เก็บปัญหาของคุณ

2. คุณอาจมีปัญหาในการจัดรูปแบบ div ถ้าคุณทำเช่นนั้นให้แก้ไข ถ้าทุกอย่างเรียบร้อย:

3. ระบุว่าคุณใช้คำยาว ๆ ที่ไม่มีการตัดคำ หากคุณไม่สามารถเปลี่ยนคำได้ (เช่นบรรทัดแท็กหรือสโลแกน ฯลฯ )

โซลูชันที่ 1: จัดรูปแบบตัวอักษรให้มีขนาดเล็กลงในคิวรีสื่อของคุณสำหรับหน้าจอขนาดเล็ก (ฉันมักจะพบว่า @media (max-width: 767px) เพียงพอ)

หรือ:

แนวทางที่ 2:

@media (max-width: 767px){

h1, h2, h3 {word-wrap: break-word;}
}

CSS โดย Paulius Marčiukaitisทำงานได้ดีกับธีม Genesis ของฉันนี่คือสิ่งที่ฉันแก้ไขเพิ่มเติมตามความต้องการของฉัน:

@media only screen and (max-width: 480px) {
.entry {
background-color: #fff;
margin-bottom: 0;
padding: 10px 8px;

}

วิธีแก้ปัญหาง่ายๆคือเขียนอะไรแบบนั้น

px-lg-1

mb-lg-5

เมื่อเพิ่ม lg คลาสจะถูกนำไปใช้กับหน้าจอขนาดใหญ่เท่านั้น

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

นี่คือสิ่งที่ฉันทำเพื่อ Bootstrap 3/4

ใช้ของเหลวในภาชนะแทนภาชนะ

เพิ่มสิ่งนี้ใน CSS ของฉัน

@media (min-width: 1400px) {
    .container-fluid{
        max-width: 1400px;
    }   
}

ซึ่งจะลบระยะขอบด้านล่างหน้าจอความกว้าง 1400px

css อื่นที่สามารถทำให้เกิดปัญหาระยะขอบคือคุณมีdirection:someValueใน css ของคุณดังนั้นเพียงแค่ลบออกโดยตั้งค่าเป็นเริ่มต้น

ตัวอย่างเช่น:

body {
     direction:rtl;
 }
@media (max-width: 480px) {
    body {
     direction:initial;
    }
}