twitter-bootstrap – Bootstrap页脚,页面全宽

发布时间：2020-12-18 00:24:41 所属栏目：安全来源：网络整理

导读：我正在使用joomla设计一个网站并使用bootstrap框架. 现在我的页脚出了问题.基本上我使用简单的网格布局,我希望网站的内容部分位于页面的中心,左侧和右侧都有我已经实现的空间. 而现在我希望页脚不像中间内容,而是在页面的末尾和整个宽度而不是固定.所以我想

我正在使用joomla设计一个网站并使用bootstrap框架.
现在我的页脚出了问题.基本上我使用简单的网格布局,我希望网站的内容部分位于页面的中心,左侧和右侧都有我已经实现的空间.
而现在我希望页脚不像中间内容,而是在页面的末尾和整个宽度而不是固定.所以我想通常向下滚动页面,在页面的末尾,页脚将以全宽显示.
我搜索了很长时间但我找不到任何有效的解决方案.
我希望有人可以帮助我实现它……

以下是我使用的php-page和css文件的脚本

的index.php

<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
    <!-- main container -->
    <div class='container'>
        <!-- header -->
        <div class="mainMenuTop"/>
        <div class='row'>
            <jdoc:include type="modules" name="position-1" style="well" />
        </div>
        <div class='row'>
            <!-- main content area -->
            <div class='span12'>
                <div class="article">
                    <jdoc:include type="component" />
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class='row'>
            <div class='span12'>
                <div class='footer'>
                <jdoc:include type="modules" name="footer" style="none" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

style.css文件

body 
{
    overflow-y: scroll;
    background: url(../images/Test.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

.article
{
    padding: 25px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 18px;
    background: rgba(255,255,0.5);
    background: rgba(255,255); /* The Fallback */
    font-size: 12pt;
    font-family:"Calibri",Times,serif;
}

.footer
{
    height: 50px;
    border-top: solid 1px black;
}

亲切的问候,
oodoloo

解决方法

你可以把你的页脚分开< div class =“container”>主要内容容器之后.然后,您可以指定一个不限制页脚宽度的容器类,就像主内容一样.例如.：：

<div class="container">
      ...
</div>
<div id="footer" class="container-fluid">
    <div class="row">....</div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!