页脚无法正常工作并破坏所有 CSS答案

【问题标题】：footer doesn't work correctly and break all css页脚无法正常工作并破坏所有 CSS
【发布时间】：2016-03-03 17:01:05
【问题描述】：

我的预项目中有一个页脚并且工作正常，如下图所示：

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

不知道为什么？！网站.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>

我在页面标题中有一个全屏引导轮播，在正文中有一些图片。感谢您的帮助。

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

它在http://jsfiddle.net/53pdf4jb/ 中运行良好，但我不知道为什么在我的项目中.....

【问题讨论】：

请发html代码
应用 clear:both 为您的页脚样式
jsfiddle可以复制吗？
谢谢你，我更新我的帖子
这是我在jsfiddle.net/53pdf4jb@SureshPonnukalai 中的代码

标签： html css twitter-bootstrap footer

【解决方案1】：

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

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

【讨论】：