Bootstrap Element 100% กว้าง

Question 1

ฉันต้องการสร้างบล็อคสี 100% แบบสลับกัน สถานการณ์ "ในอุดมคติ" แสดงเป็นสิ่งที่แนบมาเช่นเดียวกับสถานการณ์ปัจจุบัน

การตั้งค่าที่ต้องการ:

ปัจจุบัน:

ความคิดแรกของฉันคือสร้างคลาส div กำหนดสีพื้นหลังและกำหนดความกว้าง 100%

.block {
    width: 100%;
    background: #fff;
}

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

Question 2

containerระดับคือเจตนาไม่ 100% ความกว้าง เป็นความกว้างคงที่ที่แตกต่างกันขึ้นอยู่กับความกว้างของวิวพอร์ต

หากคุณต้องการทำงานกับความกว้างเต็มหน้าจอให้ใช้.container-fluid:

Bootstrap 3:

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6"></div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
      <div class="col-lg-8"></div>
      <div class="col-lg-4"></div>
    </div>
    <div class="row">
      <div class="col-lg-12"></div>
    </div>
  </div>
</body>

Bootstrap 2:

<body>
  <div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
  </div>
  <div class="row">
    <div class="span8"></div>
    <div class="span4"></div>
  </div>
  <div class="row">
    <div class="span12"></div>
  </div>
</body>

Question 3

นี่คือวิธีการตั้งค่าที่คุณต้องการด้วยBootstrap 3 :

<div class="container-fluid">
    <div class="row"> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    ... your content here ...
                </div>
            </div>
        </div>
    </div>
</div>

container-fluidส่วนหนึ่งที่ทำให้แน่ใจว่าคุณสามารถเปลี่ยนพื้นหลังมากกว่าเต็มความกว้าง containerส่วนทำให้แน่ใจว่าเนื้อหาของคุณจะยังคงอยู่ในห่อมีความกว้างคงที่

วิธีนี้ใช้ได้ผล แต่โดยส่วนตัวแล้วฉันไม่ชอบการทำรังทั้งหมด อย่างไรก็ตามฉันยังไม่พบวิธีแก้ปัญหาที่ดีกว่านี้

Question 4

คำตอบที่รวดเร็ว

ใช้ไม่ได้ซ้อนทับหลายตัว .container s
ตัดสิ่งที่.containerคุณต้องการให้มีพื้นหลังแบบเต็มความกว้างในไฟล์div
เพิ่มพื้นหลัง CSS ใน div การตัด

Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:

<div class="container">
  <h2>Section 1</h2>
</div>
<div class="specialBackground">
  <div class="container">
    <h2>Section 2</h2>
  </div>
</div>

CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }

ข้อมูลเพิ่มเติม

อย่าใช้ตู้คอนเทนเนอร์

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

มันทำงานอย่างไร

divเป็นองค์ประกอบบล็อกซึ่งโดยค่าเริ่มต้นจะครอบคลุมถึงความกว้างเต็มของเนื้อหาเอกสารมีคุณลักษณะเต็มความกว้าง นอกจากนี้ยังมีความสูงของเนื้อหา (หากคุณไม่ได้ระบุไว้เป็นอย่างอื่น)

คอนเทนเนอร์ bootstrap ไม่จำเป็นต้องเป็นลูกโดยตรงของร่างกายเป็นเพียงคอนเทนเนอร์ที่มีช่องว่างภายในบางส่วนและอาจมีความกว้างคงที่ของตัวแปรความกว้างหน้าจอ

หากเส้นตารางพื้นฐาน.containerมีความกว้างคงที่บางส่วนก็จะจัดกึ่งกลางอัตโนมัติในแนวนอน
ดังนั้นจึงไม่มีความแตกต่างไม่ว่าคุณจะวางเป็น:

ลูกโดยตรงของร่างกาย
ลูกโดยตรงของพื้นฐาน divที่เป็นลูกโดยตรงของร่างกาย

โดย "พื้นฐาน" divหมายความdivว่าไม่มี CSS ที่เปลี่ยนแปลงเส้นขอบช่องว่างขนาดตำแหน่งหรือขนาดเนื้อหา เป็นเพียงองค์ประกอบ HTML ที่มีdisplay: block;CSS และอาจเป็นพื้นหลัง
แต่แน่นอนว่าการตั้งค่า CSS แบบแนวตั้ง (ความสูงช่องว่างด้านบน ... ) ไม่ควรทำลายตาราง bootstrap :-)

Bootstrap เองก็ใช้แนวทางเดียวกัน

... ทั้งหมดนี้เป็นเว็บไซต์ของตัวเองและในตัวอย่าง "JUMBOTRON":
http://getbootstrap.com/examples/jumbotron/

Question 5

มีวิธีแก้ปัญหาโดยใช้ vw มีประโยชน์เมื่อคุณไม่สามารถสร้างที่เก็บของเหลวใหม่ได้ ภายใน div 'container' แบบคลาสสิกจะมีขนาดเต็ม

.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}

หลังจากนี้มีปัญหาแถบด้านข้าง (ขอบคุณ @Typhlosaurus) แก้ไขด้วยฟังก์ชั่น js นี้เรียกมันเมื่อโหลดเอกสารและปรับขนาด:

function full_row_resize(){
    var body_width = $('body').width();
    $('.row-full').css('width', (body_width));
    $('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
    return false;
}

Question 6

ใน bootstrap 4 คุณสามารถใช้คลาส 'w-100' (w as width และ 100 as 100%)

คุณสามารถดูเอกสารได้ที่นี่: https://getbootstrap.com/docs/4.0/utilities/sizing/

Question 7

หากคุณไม่สามารถเปลี่ยนเค้าโครง HTML:

.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12">a</div>
    <div class="col-xs-12">b</div>
    <div class="col-xs-12 full-width">c</div>
    <div class="col-xs-12">d</div>
  </div>
</div>

การสาธิต: http://www.bootply.com/tVkNyWJxA6

Question 8

แทน

style="width:100%"

ลองใช้

class="col-xs-12"

มันจะช่วยคุณได้ 1 ตัว :)

Question 9

บางครั้งก็ไม่สามารถปิดที่เก็บเนื้อหาได้ วิธีแก้ปัญหาที่เราใช้นั้นแตกต่างกันเล็กน้อย แต่ป้องกันไม่ให้ล้นเนื่องจากขนาดแถบเลื่อนของ firefox!

.full-width {
 margin-top: 15px;
 margin-bottom: 15px;
 position: relative;
 width: calc(100vw - 10px);
 margin-left: calc(-50vw + 5px);
 left: 50%;
}

นี่คือตัวอย่าง: https://jsfiddle.net/RubbelDeKatz/wvt9253q

Question 10

ขออภัยควรขอ css ของคุณด้วย ตามที่เป็นอยู่โดยทั่วไปสิ่งที่คุณต้องดูคือการให้คอนเทนเนอร์ของคุณเป็นสไตล์.container { width: 100%; }ใน css ของคุณจากนั้น div ที่แนบมาจะสืบทอดสิ่งนี้ตราบเท่าที่คุณไม่ได้ให้ความกว้างของมันเอง นอกจากนี้คุณยังขาดแท็กปิดบางแท็กและแท็ก</center>ปิด<center>โดยที่ไม่เคยเปิดอย่างน้อยก็ในส่วนนี้ของโค้ด ฉันไม่แน่ใจว่าคุณต้องการรูปภาพใน div เดียวกันที่มีเนื้อหาของคุณหรือแยกกันฉันจึงสร้างสองตัวอย่าง ฉันเปลี่ยนความกว้างของ img เป็น 100px เพียงเพราะ jsfiddle มีพื้นที่ดูขนาดเล็ก แจ้งให้เราทราบหากไม่ใช่สิ่งที่คุณกำลังมองหา

เนื้อหาและรูปภาพแยกจากกัน: http://jsfiddle.net/QvqKS/2/

เนื้อหาและรูปภาพใน div เดียวกัน (img ลอยไปทางซ้าย): http://jsfiddle.net/QvqKS/3/

Question 11

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

ในสถานการณ์ของฉันฉันต้องการให้เนื้อหาทั้งหมด(ของทุกหน้า)แสดงผลภายในคอนเทนเนอร์ดังนั้นนี่คือส่วนของโค้ดจาก _Layout.cshtml ของฉัน:

<div id="body">

    @RenderSection("featured", required: false)

    <section class="content-wrapper main-content clear-fix">
        <div class="container">
            @RenderBody()
        </div>
    </section>
</div>

ในหน้าดัชนีหน้าแรกของฉันฉันมีภาพส่วนหัวพื้นหลังที่ฉันต้องการเติมเต็มความกว้างของหน้าจอดังนั้นวิธีแก้ปัญหาคือทำให้ Index.cshtml เป็นดังนี้:

@section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
    <div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}

<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
    <div class="container">
        <div class="row">
          MORE CONTENT
        </div>
    </div>
</div>

ฉันคิดว่าสิ่งนี้ดีกว่าการพยายามหาวิธีแก้ปัญหาเนื่องจากส่วนต่างๆถูกสร้างขึ้นโดยมีวัตถุประสงค์เพื่อให้ (หรือบังคับ) มุมมองเพื่อแทนที่เนื้อหาบางส่วนในเค้าโครงแบบไดนามิก

Question 12

แม้ว่าจะมีคนบอกว่าคุณจะต้องใช้. container-fluid ในกรณีนี้ แต่คุณจะต้องลบช่องว่างภายในออกจาก bootstrap ด้วย

Question 13

คำตอบต่อไปนี้ไม่ได้เหมาะสมที่สุดสำหรับการวัดใด ๆ แต่ฉันต้องการสิ่งที่รักษาตำแหน่งภายในคอนเทนเนอร์ในขณะที่มันยืด div ด้านในจนสุด

https://jsfiddle.net/fah5axm5/

$(function() {
    $(window).on('load resize', ppaFullWidth);

    function ppaFullWidth() {
        var $elements = $('[data-ppa-full-width="true"]');
        $.each( $elements, function( key, item ) {
            var $el = $(this);
            var $container = $el.closest('.container');
            var margin = parseInt($container.css('margin-left'), 10);
            var padding = parseInt($container.css('padding-left'), 10)
            var offset = margin + padding;

            $el.css({
                position: "relative",
                left: -offset,
                "box-sizing": "border-box",
                width: $(window).width(),
                "padding-left": offset + "px",
                "padding-right": offset + "px"
            });
        });
    }
});

Question 14

ฉันจะใช้ div 'คอนเทนเนอร์' สองรายการแยกกันดังนี้:

<div class="container">
   /* normal*/
</div>
<div class="container-fluid">
   /*full width container*/
</div>

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