Question

我有一个Wordpress网站，每个页面的导航栏下方都应有一个全宽图像。我使用的主题使用Bootstrap 3，所有内容都加载到一个标准容器中，我希望滑块图像能够突破并且100％宽。

如果我将滑块设置为绝对定位，滑块图像下方的内容将被隐藏，图像不会向左移动。

因为有很多页面我不想制作大量的模板，如果最终用户每次想要添加新页面时都不需要给我打电话，我会更喜欢。

我真的不想将页面内容包装在标准容器中，因为在将来添加新页面时，它不再是用户友好的。

如何解决这个问题的任何想法将不胜感激。

Answer 1

难道你不能突破容器div并在它之后开始一个新的吗？

像这样：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        .greenbox {
            background-color: green;
            width: 100%;
            height: 300px;
        }
        .redbox {
            background-color: red;
            width: 100%;
            height: 300px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="greenbox">


        </div>
    </div>
        <!-- This will fill the whole width -->
        <div class="redbox">

        </div>

    <div class="container">

        <div class="greenbox">

        </div>
    </div>
</body>
</html>

结果：

enter image description here

引导容器

1 个答案: