Question

问题背景：

我是Bootstrap的新手，并且最近一直在开发一个网站，当窗口调整为“移动”设备时，我的页面内容“重叠”底部的问题已经遇到问题分辨率。

问题：

下图显示了最大化的屏幕，没有重叠。 enter image description here

重新调整屏幕大小，页脚重叠：

enter image description here

HTML：

我有一个包含页脚的“母版页”，每个页面实现了这一点。

    <div class="row-fluid">
        <div class="span12">
            <div class="padding">
                <h2>C#</h2>
                <div class="row-fluid">
                    <div class="span4">
                        <h3>Project1</h3>
                        @ViewBag.ProjectTwoInfo
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                    <div class="span4">
                        <h3>Project1</h3>
                        @ViewBag.ProjectOneInfo
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                    <div class="span4">
                        <h3>Project1</h3>
                        @ViewBag.ProjectOneInfo
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row-fluid">
    <div class="span12 cSharpBackGroundColour">
        <div class="container">
            <div class="span12">
                <div class="row-fluid">
                    <div class=" paddingTop">
                        <div class="span3 circle-image">
                        </div>
                        <div class="span3 circle-image">
                        </div>
                        <div class="span3 circle-image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

编辑：

页脚代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Martin Bean" />
<link href="\Bootstrap\css\bootstrap.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.min.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-social.css" rel="stylesheet" />
<link href="\CustomCSS\Footer.css" rel="stylesheet" />
<link href="\CustomCSS\HeroUnit.css" rel="stylesheet" />
<link href="\Bootstrap\FontAwesome\css\font-awesome.css" rel="stylesheet">
<link href="\Bootstrap\FontAwesome\css\font-awesome.min.css" rel="stylesheet">
<script src="\Scripts\jquery-2.1.1.min.js"></script>
<script src="\Bootstrap\js\bootstrap.js"></script>
<title>Twitter&rsquo;s Bootstrap with Ryan Fait&rsquo;s Sticky Footer</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
    html, body {
        height: 100%;
    }

    footer {
        color: #666;
        background: #222;
        padding: 17px 0 18px 0;
        border-top: 1px solid #000;
        height: auto;
    }

    .colour {
        background-color: #272727;
        height: 100px;
    }

    .imageCentering {

        align-content:center;
    }

    footer a {
        color: #999;
    }

        footer a:hover {
            color: #efefef;
        }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -63px;
        background-color: white;
    }

    .wrapper2 {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        background-color: white;
        margin-left: 250px;
        margin-right: 250px;
        padding: 25px 25px 25px 25px;
    }

    .title {
        margin-top: 40px;
        padding-left: 5px;
        font-family: 'Segoe UI';
        color: white;
        font-size: x-large;
    }

    .push {
        height: 90px;
    }

    .pushtop {
        height: 5px;
    }
    /* not required for sticky footer; just pushes hero down a bit */
    .wrapper > .container {
        padding-top: 20px;
    }

    .buttonAlign {
        align-content: center;
    }

    .floatLeft {
        float: left;
    }

    .floatRight {
        float: right;
        padding-right: 20px;
    }
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-inner">

        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="/Blogs/All">About</a></li>
                <li><a href="/About">Contact</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Projects
                        <b class=" caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
                        <li><a href="http://www.google.com">Proj1</a></li>
                        <li><a href="http://www.google.com">Proj2</a></li>
                        <li><a href="http://www.amazon.com">Proj3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
@*</div>*@
<div class="colour">
    <div class="row-fluid">
        <div class="title">
            Software Developer@*</div>*@
        </div>
    </div>
</div>

<div class="wrapper">

        @RenderBody()
    </div>

<div class="push"></div>
<footer>
    <div class="container">
        <div class="row-fluid">
            <div class="span12">
                <div class="floatLeft">
                    <a><ul>About Me</ul></a>
                    <a><ul>Projects</ul></a>
                    <a><ul>Contact Me</ul></a>
                </div>
                <div class="floatRight">
                    <a href="#"><i class="fa fa-facebook-square fa-3x"></i></a>
                    <a href="#"><i class="fa fa-linkedin-square fa-3x"></i></a>
                    <a href="#"><i class="fa fa-twitter-square fa-3x"></i></a>
                </div>
            </div>
        </div>
    </div>
</footer>

解决此问题的任何帮助都会很棒。请注意我也想要'灰色'背景div - 它可以保持3个图像的响应。

Answer 1

你有几个HTML代码问题，我做了清理工作，并为了演示目的简化了一些事情（当然你可以随意调整）。

HTML部分：

<div class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <div class="nav-collapse collapse">
            <ul class="nav">
                <li><a href="/Blogs/All">About</a>

                </li>
                <li><a href="/About">Contact</a>

                </li>
                <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Projects
                        <b class=" caret"></b>
                    </a>

                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
                        <li><a href="http://www.google.com">Proj1</a>

                        </li>
                        <li><a href="http://www.google.com">Proj2</a>

                        </li>
                        <li><a href="http://www.amazon.com">Proj3</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="colour">
    <div class="row-fluid">
        <div class="title">Software Developer</div>
    </div>
</div>
<div class="wrapper">
    <div id="lipsum">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet rutrum leo quis aliquam. Sed pretium efficitur enim at ultricies. Nullam ullamcorper porta risus, quis imperdiet eros rutrum sit amet. Nullam in nisl bibendum, dignissim arcu quis, consectetur turpis. Cras luctus egestas ligula. Suspendisse dignissim diam a augue egestas pharetra. Donec viverra eu velit ut pharetra. Nulla suscipit, ante eget venenatis cursus, nulla erat congue tellus, faucibus cursus orci lacus sit amet urna. Nulla facilisi. Duis commodo porttitor sem. In hac habitasse platea dictumst. Integer dui elit, rhoncus vitae tincidunt nec, scelerisque ac dolor. Integer at ligula eget ligula scelerisque volutpat eget quis lorem.</p>
        <p>Praesent ac sapien sit amet magna sollicitudin vestibulum et nec erat. Quisque consectetur vel dui ac dapibus. Praesent at sapien tristique augue tincidunt auctor sed non justo. Fusce ac venenatis mauris. Quisque lobortis neque a eros hendrerit consectetur ac id magna. Mauris non velit ante. Nunc orci lorem, auctor a orci a, luctus sollicitudin turpis. Phasellus ornare tempus felis eu pharetra.</p>
        <p>Integer eleifend, sapien eu molestie tristique, nunc felis varius tellus, at congue magna sapien ut tortor. Maecenas sodales ultricies ligula sollicitudin cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet odio ex, ut luctus tortor mollis sit amet. Aenean rutrum consequat lorem eget porta. Aliquam lacus enim, congue ac condimentum sit amet, consequat a diam. Duis eget mauris id nisi molestie vulputate sit amet vel nulla. Curabitur ac feugiat enim, eu rutrum magna.</p>
        <p>Suspendisse sed lorem ac leo volutpat sodales. Pellentesque erat ex, tincidunt eu urna ac, gravida convallis eros. Phasellus nisl purus, egestas quis ipsum id, ornare pharetra tellus. Nullam congue leo ex, nec sagittis dolor tempor nec. Sed convallis sem risus, a congue leo feugiat non. Integer placerat dui eget lorem eleifend, a gravida tortor tempus. Vestibulum at est tempor sem sollicitudin hendrerit. Etiam vitae mauris eget sapien pharetra mattis a quis metus. Mauris facilisis sapien non fringilla scelerisque. Fusce a odio ultricies, rutrum nunc quis, faucibus quam.</p>
        <p>Donec sed est vitae elit dignissim gravida. Vivamus blandit eros ex, vel placerat dui ornare in. Nullam feugiat risus lectus. Cras sagittis dolor vitae vulputate accumsan. Sed arcu massa, tempor vel massa nec, vehicula pellentesque tortor. Suspendisse fringilla eros risus, a scelerisque neque tempor ut. In et velit sapien. Etiam porttitor aliquam arcu, ut mollis augue rutrum feugiat.</p>
    </div>
</div>
<div class="push"></div>
<footer>
    <div class="container">
        <div class="row-fluid">
            <div class="span12 links">
                <div class="floatLeft"> <a>About Me</a>
 <a>Projects</a>
 <a>Contact Me</a>

                </div>
                <div class="floatRight"> <a href="#"><i class="fa fa-facebook-square fa-3x"></i></a>
 <a href="#"><i class="fa fa-linkedin-square fa-3x"></i></a>
 <a href="#"><i class="fa fa-twitter-square fa-3x"></i></a>

                </div>
            </div>
        </div>
    </div>
</footer>

您在页脚<UL>之前有<A>个元素，并且所有部分都有额外的结束</div>。清除HTML后，CSS就像这样简单：

.links .floatLeft a {
    padding:30px;
    background:#fc0;
}
footer, .wrapper, .push {
    position:relative;
    clear:both;
    padding-top:20px;
}

See fiddle获取完整代码和预览

Bootstrap - 页脚与主要内容重叠

1 个答案: