Question

您好我想在容器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就像普通宽度一样。如果我添加背景颜色，它应该是＆＃34;在容器＆＃34;。

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

我正在研究＆＃34;全宽视频背景＆＃34;和＆＃34;全宽背景颜色＆＃34;我在那里写的布局。

任何提示？我正在使用Bootstrap 3.1

进行处理

谢谢

Answer 1

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

Answer 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

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

2 个答案: