页脚无法正常工作并破坏所有 css

Question

我的前期项目中有一个页脚并且工作正常，如底部图片所示：

我想在其他项目中使用它，但它不能正常工作：

我不知道为什么？！站点 .css

body {
padding-top: 0px;
padding-bottom: 0px;
width:100%;
 height:100%
}

.body-content {
padding-left: 0px;
padding-right: 0px;
}
input,
select,
textarea {
max-width: 280px;
}

.field-validation-error {
color: #b94a48;
}

.field-validation-valid {
display: none;
}

input.input-validation-error {
border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
border: 0 none;
}

.validation-summary-errors {
color: #b94a48;
 }

.validation-summary-valid {
display: none;
}

layout.cshtml:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("styles", false)
</head>
<body style="width:100% !important;padding:0px;">
@*overflow-x:hidden;*@


@RenderBody()

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", false) 
</body>
</html>
<br />
<footer style="background-color:#191919; text-align:center;color:GrayText;">
<div>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">text1</li>
        <li class="list-group-item"><a class="Alist" href="">text2</a></li>
        <li class="list-group-item"><a class="Alist" href="">text3</a></li>
        <li class="list-group-item"><a class="Alist" href="">text4</a></li>

    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">manu</li>
        <li class="list-group-item"><a class="Alist" href="">text5</a></li>
        <li class="list-group-item"><a class="Alist" href="">text6</a></li>
        <li class="list-group-item"><a class="Alist" href="">text7</a></li>

    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold;" class="list-group-item">text8</li>
        <li class="list-group-item">text9</li>
        <li class="list-group-item">text10</li>
        <li class="list-group-item">text11</li>
        <li class="list-group-item">tel</li>
    </ul>
    <ul style="display:inline-block;text-align:right;list-style-type:none;" class="list-group">
        <li style="font-weight:bold; padding-bottom:10px;" class="list-group-item">follow us</li>

        <li class="list-group-item">
            <a href=""><img src="~/Images/MenuImages/facebook.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/twitter.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/youtube.png" /></a>
            &nbsp;
            <a href=""><img src="~/Images/MenuImages/instagram.png" /></a>
        </li>

    </ul>
</div>
<div>
    <hr style="width: 70%; background-color: #5d5d5d; height: 0.5px; border: 0 none; " />
</div>
<div style="text-align:center;">
    <span style="text-align:center;"> all rights reserved</span>
    <span style="text-align:center;">&copy;</span>

</div>

我在页眉中有全屏 bootstrap 旋转木马，在正文中有一些图片。感谢您的帮助。

我在我的页脚样式中添加了 clear:both，它看起来更好，但它仍然不是我想要的主要页脚

它在 http://jsfiddle.net/53pdf4jb/ 中工作正常，但我不知道为什么在我的项目中.....

Answer 1

根据上面的讨论，这里是您问题的解决方案。应用 clear:both 将页脚内容置于单独的行中，然后将背景颜色应用于列表项以移除白色背景。

 footer{clear:both;}
 footer ul li{background-color:#191919;}

页脚无法正常工作并破坏所有 css

footer doesn't work correctly and break all css

html

css

footer

twitter-bootstrap

我在页眉中有全屏 bootstrap 旋转木马，在正文中有一些图片。感谢您的帮助。