容器引导程序 3 中的最大全宽答案

【问题标题】：Max Full width in container bootstrap 3容器引导程序 3 中的最大全宽
【发布时间】：2019-06-06 01:36:23
【问题描述】：

您好，我想在容器 div 中有全角 div。

<html>
<head>
</head>
<body>
<div class="wrap">
<div class="container">
    <div class="row">
        <!-- Start content -->

        <div class="normal_width"> Hello this is normal width in container </div>
        <div class="full_width"> This is Full width on container </div>

        <!-- End content -->
    </div> <!-- row -->
</div> <!-- container -->
</div> <!-- wrap -->
</body>

.normal_width 就像正常宽度一样。如果我添加背景颜色，它应该是“在容器中”。

这是我的问题和问题 (.full_width) 如果我添加背景颜色，它必须是宽度：整个布局的 100%（最大全宽）。但是不知道怎么给css。

我正在处理我在那里写的布局上的“全宽视频背景”和“全宽背景颜色”。

有什么建议吗？我正在使用 Bootstrap 3.1

谢谢

【问题讨论】：

标签： width max

【解决方案1】：

在<div class="row"> 中，您应该拥有类为“col-md-12”的全屏元素 (http://getbootstrap.com/examples/grid/)。响应式它会自动调整大小。在后来的引导程序中，他们使用了不再支持的类“span12”（http://getbootstrap.com/2.3.2/scaffolding.html）。

【讨论】：

是的，我需要添加 col-md-12。但我的意思是.. 有一个容器可以让 div 排列中心。 “正常宽度”没问题。但我希望 full_width 是最大全宽。喜欢这个网站。 minaolendemo.wordpress.com 见文章和作品集。它们是最大全宽。其他是 normal_width。我想做这样的。问题是我必须将“容器” div 作为包装 div。

【解决方案2】：

你可以用 JavaScript 和 CSS 解决这个问题：

CSS：

.full_width {
        left: 50%;
        position: relative;
        transform: translateX(-50%);
    }

JavaScript（需要 jQuery）：

 function calculateFullWidth() {
        var calculatedWidth = $("body").width();
        $(".full_width").css({
            width: calculatedWidth
        })
    }
 calculateFullWidth();
 $(window).on("resize", calculateFullWidth);

如果您希望元素为 100 % 宽度，您可以移除 .full_width - 元素上的填充

这是Plunkr

【讨论】：