blocks|key|501857|text|有一个使用大众的解决方法。在无法创建新的流体容器时非常有用。这个，在一个经典的“容器”div中将是完整大小的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|501858|.row-full{
+width:+100vw;
+position:+relative;
+margin-left:+-50vw;
+left:+50%25;
}|code-block|syntax|javascript|501859|然后是侧边栏问题(感谢@Typhlosaurus)，这个js函数解决了这个问题，在加载文档和调整大小时调用它：|501860|function+full_row_resize(){
++++var+body_width+=+$('body').width();
++++$('.row-full').css('width',+(body_width));
++++$('.row-full').css('margin-left',+('-'%2B(body_width/2)%2B'px'));
++++return+false;
}|501861|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>There is a workaround using vw. Is useful when you can't create a new fluid container.
This, inside a classic 'container' div will be full size.</p>

<pre><code>.row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 left: 50%;
}
</code></pre>

<p>After this there is the sidebar problem (thanks to @Typhlosaurus), solved with this js function, calling it on document load and resize:</p>

<pre><code>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;
}
</code></pre>


blocks|key|285327|text|在bootstrap+4中，您可以使用'w-+100‘类(w表示宽度，100表示100%25)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285328|您可以在此处找到文档：https://getbootstrap.com/docs/4.0/utilities/sizing/|offset|length|285329|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/utilities/sizing/^0|0|B|1F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)</p>

<p>You can find documentation here:
<a href="https://getbootstrap.com/docs/4.0/utilities/sizing/" rel="noreferrer">https://getbootstrap.com/docs/4.0/utilities/sizing/</a></p>


blocks|key|285237|text|如果无法更改HTML布局，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285238|.full-width+{
++++width:+100vw;
++++margin-left:+-50vw;
++++left:+50%25;
}|code-block|syntax|javascript|285239|<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>|285240|演示：http://www.bootply.com/tVkNyWJxA6|offset|length|285241|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bootply.com/tVkNyWJxA6^0|0|0|0|3|X|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>If you can't change the HTML layout:</p>

<pre><code>.full-width {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
}
</code></pre>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;a&lt;/div&gt;
    &lt;div class="col-xs-12"&gt;b&lt;/div&gt;
    &lt;div class="col-xs-12 full-width"&gt;c&lt;/div&gt;
    &lt;div class="col-xs-12"&gt;d&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Demo: <a href="http://www.bootply.com/tVkNyWJxA6" rel="noreferrer">http://www.bootply.com/tVkNyWJxA6</a></p>


blocks|key|285374|text|有时不可能关闭内容容器。我们使用的解决方案有点不同，但由于firefox滚动条的大小，它可以防止溢出！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285375|.full-width+{
+margin-top:+15px;
+margin-bottom:+15px;
+position:+relative;
+width:+calc(100vw+-+10px);
+margin-left:+calc(-50vw+%2B+5px);
+left:+50%25;
}|code-block|syntax|javascript|285376|下面是一个示例：https://jsfiddle.net/RubbelDeKatz/wvt9253q|offset|length|285377|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/RubbelDeKatz/wvt9253q^0|0|0|8|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Sometimes it's not possible to close the content container.
The solution we are using is a bit different but prevent a overflow because of the
firefox scrollbar size!</p>

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

<p>Here is a example: <a href="https://jsfiddle.net/RubbelDeKatz/wvt9253q" rel="nofollow noreferrer">https://jsfiddle.net/RubbelDeKatz/wvt9253q</a></p>


blocks|key|502033|text|而不是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|502034|style="width:100%25"|code-block|syntax|javascript|502035|尝试使用|502036|class="col-xs-12"|502037|它将为您节省1个字符:)|502038|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Instead of </p>

<pre><code>style="width:100%"
</code></pre>

<p>try using </p>

<pre><code>class="col-xs-12"
</code></pre>

<p>it will save you 1 character :)</p>


blocks|key|501769|text|对不起，我应该也要你的css的。实际上，你需要做的就是在你的css中给你的容器div赋予样式.container+{+width:+100%25;+}，然后，只要你不给它们自己的宽度，包含的div就会继承这个样式。您还遗漏了一些结束标记，并且</center>会在<center>从未打开的情况下关闭它，至少在这段代码中是这样。我不确定你是想把图片放在包含你的内容的同一个div中，还是想放在不同的div中，所以我创建了两个例子。我将img的宽度改为100px，只是因为jsfiddle提供了一个很小的查看区域。如果这不是你要找的，请告诉我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|501770|内容和图片分离：http://jsfiddle.net/QvqKS/2/|501771|同一目录中的内容和图像(img向左浮动)：http://jsfiddle.net/QvqKS/3/|501772|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QvqKS/2/|1|http://jsfiddle.net/QvqKS/3/^0|1A|R|3B|9|3M|8|0|8|S|0|0|L|S|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|J|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

<p>Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style <code>.container { width: 100%; }</code> in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the <code>&lt;/center&gt;</code> closes a <code>&lt;center&gt;</code> without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for. </p>

<p>content and image separate: <a href="http://jsfiddle.net/QvqKS/2/" rel="nofollow">http://jsfiddle.net/QvqKS/2/</a></p>

<p>content and image in same div (img floated left): <a href="http://jsfiddle.net/QvqKS/3/" rel="nofollow">http://jsfiddle.net/QvqKS/3/</a></p>


blocks|key|285473|text|我将使用两个单独的“容器”div，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285474|<div+class="container">
+++/*+normal*/
</div>
<div+class="container-fluid">
+++/*full+width+container*/
</div>|code-block|syntax|javascript|285475|请记住，container-fluid不遵循断点，它是一个全宽的容器。|285476|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I would use two separate 'container' div as below:</p>

<pre><code>&lt;div class="container"&gt;
   /* normal*/
&lt;/div&gt;
&lt;div class="container-fluid"&gt;
   /*full width container*/
&lt;/div&gt;
</code></pre>

<p>Bare in mind that container-fluid does not follow your breakpoints and it is a full width container.</p>


blocks|key|501798|text|虽然人们已经提到，在这种情况下需要使用.container-fluid，但您还必须从bootstrap中删除填充。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|501799|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Though people have mentioned that you will need to use .container-fluid in this case but you will also have to remove the padding from bootstrap.</p>


blocks|key|501917|text|下面的答案在任何情况下都不是最优的，但我需要一些东西来保持它在容器中的位置，同时它完全伸展内部div。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|501918|https://jsfiddle.net/fah5axm5/|offset|length|501919|$(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+%2B+padding;

++++++++++++$el.css({
++++++++++++++++position:+"relative",
++++++++++++++++left:+-offset,
++++++++++++++++"box-sizing":+"border-box",
++++++++++++++++width:+$(window).width(),
++++++++++++++++"padding-left":+offset+%2B+"px",
++++++++++++++++"padding-right":+offset+%2B+"px"
++++++++++++});
++++++++});
++++}
});|code-block|syntax|javascript|501920|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|U|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.</p>

<p><a href="https://jsfiddle.net/fah5axm5/" rel="nofollow">https://jsfiddle.net/fah5axm5/</a></p>

<pre><code>$(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"
            });
        });
    }
});
</code></pre>


blocks|key|285537|text|这必须有效(移动电话和桌面屏幕)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|285538|class:+alignfull和class:+img-fluid会施展魔法的。|offset|length|style|CODE|285539|++++<div+class="alignfull">
++++++++++++++++++++++++++
+++++++++<img+class="img-fluid"+style="background-size:+cover;
+++++++++++++++++++++++++++++++++++++++background-position:+center+;+
+++++++++++++++++++++++++++++++++++++++background-repeat:+no-repeat;
+++++++++++++++++++++++++++++++++++++++height:+auto;
+++++++++++++++++++++++++++++++++++++++min-width:+100%25;+
+++++++++++++++++++++++++++++++++++++++width:+-moz-available;+"+
+++++++++src="{{+$image->image+}}"+alt="An+image">

+++</div>|code-block|syntax|javascript|285540|entityMap^0|0|0|G|H|G|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>This must work (Mobile phone as well as Desktop screen):</p>
<p><code>class: alignfull</code> and <code>class: img-fluid</code> will do the magic.</p>
<pre><code>    &lt;div class=&quot;alignfull&quot;&gt;
                          
         &lt;img class=&quot;img-fluid&quot; style=&quot;background-size: cover;
                                       background-position: center ; 
                                       background-repeat: no-repeat;
                                       height: auto;
                                       min-width: 100%; 
                                       width: -moz-available; &quot; 
         src=&quot;{{ $image-&gt;image }}&quot; alt=&quot;An image&quot;&gt;

   &lt;/div&gt;
</code></pre>


<p>I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.</p>

<p>Desired setup: </p>

<p><img src="https://i.stack.imgur.com/CVirx.jpg" alt="http://i.imgur.com/aiEMJ.jpg"></p>

<p>Currently: </p>

<p><img src="https://i.stack.imgur.com/BmPlg.jpg" alt="http://i.imgur.com/3Sl27.jpg"></p>

<p>My first idea was to create an div class, give it a background color, and give it 100% width.</p>

<pre><code>.block {
    width: 100%;
    background: #fff;
}
</code></pre>

<p>However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.</p>


Bootstrap Element 100% Width

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我想创建交替的100%彩色块。一个“理想”的情况被描述为一个附件，以及当前的情况。所需设置：​​目前：​​我的第一个想法是创建一个div类，给它一个背景色，并给它100%的宽度。.block {    width: 100%;    background: #fff;}但是，您可以看到这显然不起作用。它被限制在集装箱区域。我试图关闭容器，但也不起作用。

问Bootstrap元素100%宽度
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap元素100%宽度EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap元素100%宽度
EN