【问题标题】: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】:

    &lt;div class="row"&gt; 中,您应该拥有类为“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

    【讨论】:

      猜你喜欢
      • 2020-08-15
      • 2017-09-02
      • 2017-12-09
      • 2020-11-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多