文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >当使用Bootstrap 4时，如何定位(向下冲水)大屏幕的页脚？

问当使用Bootstrap 4时，如何定位(向下冲水)大屏幕的页脚？
EN

Stack Overflow用户
提问于 2018-08-03 07:24:33
回答 3查看 1.3K关注 0票数 2

我的页脚有问题。我使用的是带有剃刀视图的ASP.NET Core2MVC。现在我尝试了一切，包括评论：https://css-tricks.com/couple-takes-sticky-footer/ & https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

注意，我不想要固定的脚注。我知道在SO中有几个类似的主题，但我已经尝试了我找到的所有东西。我相信我是个错误的东西。我已经工作了一整天，这让我停了下来。

每次我的页脚呈现在Edit，Delete按钮下面，或者页面中间的某个地方。我猜这可能是我的_Layout架构的问题，或者是Index文件中的for以某种方式导致了错误。

我的_Layout.cshtml看起来像这样：

代码语言：javascript
复制
<div class="wrapper">
        <div class="header">
            <!--HEADER-->
        </div>
        <div class="content">
    <!--BODY-->
            @RenderBody()
        </div>
        <div class="footer">
    <!--FOOTER-->
            <footer>
                <div></div>
            </footer>
        </div>
    </div>

我的表单看起来像这样(在大多数情况下，页脚呈现在Edit/Delete Index.cshtml下面：

代码语言：javascript
复制
<div>
    @if (Context.User.Identity.IsAuthenticated)
    {
        <a asp-action="Create" class="btn btn-sm btn-primary adminBtn">Add new project</a>
    }
    <div>
        @foreach (var item in Model)
        {
            <div class="projectContainer col-lg-6">
                @if (Context.User.Identity.IsAuthenticated)
                {
                    <form asp-action="Delete" method="post">
                        <a asp-action="Edit" class="btn btn-sm btn-warning"
                           asp-route-projectID="@item.ProjectID">
                            Edit
                        </a>
                        <input type="hidden" name="ProjectID" value="@item.ProjectID" />

                        <button type="submit" class="btn btn-danger btn-sm">
                            Delete
                        </button>
                    </form>

                }
                <div class="innerContainer" style="background-color: @item.BackColor">
                    <div class="projectHeader col-xs-12">
                        @item.Name
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a asp-action="Details" asp-route-projectID="@item.ProjectID">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a asp-action="Details" asp-route-projectID="@item.ProjectID"><img src="@item.PictureUrl" asp-append-version="true" /></a>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

我的site.css现在看起来是这样的：

代码语言：javascript
复制
html, body {
    height: 100%;
    overflow-x: hidden;
}
body {
    min-height: 100%;
    position: relative;
}

.footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-image: url(/src/img/footBG.png);
    background-repeat: repeat;
    border-top: 3px solid #557DA8;
    height: 75px;
    text-align: center;
}
.footText {
    font-size: 20px;
    position: relative;
    top: 20px;
}

使用源代码进行更新：

代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <link href="/src/lib/fontawesome/css/all.css" rel="stylesheet" />
    <link rel="stylesheet" href="/src/lib/bootstrap/css/bootstrap.min.css">
    <script src="/src/lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/dist/site.css" />
    <style>
        .input-validation-error {
            border-color: red;
            background-color: #fee;
        }
    </style>
    <title>
        Przemyslaw Bak - My projects
    </title>
</head>
<body>

    <div class="wrapper">
        <div class="header">
            <!--HEADER-->
            <div class="mainHeader">
                <div class="helloTextContainer col-12">
                    <div class="helloTxtWrapper">Hi! I am</div>
                </div>
                <div class="mainTextContainer col-sm-9 col-xs-12">
                    <div class="mainTxtWrapper">Przemyslaw Bak {developer}</div>
                </div>
                <div class="socialContainer col-sm-3 hidden-sm-down">
                    <!--VIEW COMPONENT-->

<a href="fb link" target="_blank" class="socialIcon"><i class="fab fa-facebook-square"></i></a>
<a href="li link" target="_blank" class="socialIcon"><i class="fab fa-linkedin"></i></a>
<a href="gh link" target="_blank" class="socialIcon"><i class="fab fa-github-square"></i></a>
                </div>
            </div>
            <div class="mainNavbar">
                <div><a class="mainButton projects" href="/">my projects</a></div>
                <div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
                <div><a class="mainButton about" href="/Literature">literature</a></div>
                <div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
            </div>
            <div class="stickyNavbar">
                <div><a class="mainButton projects" href="/">my projects</a></div>
                <div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
                <div><a class="mainButton about" href="/Literature">literature</a></div>
                <div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
            </div>
            <!--HERE TRIGGERS APP.JS-->
            <div class="emptySpace" id="app"></div>
        </div>

        <!--BODY-->
        <div class="content">

<!--button-->
<style>
    .projects {
        color: gray !important;
    }
</style>
<div>
    <div>
            <div class="projectContainer col-lg-6">
                <div class="innerContainer" style="background-color: #E8E8E8">
                    <div class="projectHeader col-xs-12">
                        Name of the project
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a href="/MyProjects/Details?projectID=3">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a href="/MyProjects/Details?projectID=3"><img src="#" /></a>
                    </div>
                </div>
            </div>
            <div class="projectContainer col-lg-6">
                <div class="innerContainer" style="background-color: #fafafa">
                    <div class="projectHeader col-xs-12">
                        Name of the project
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a href="/MyProjects/Details?projectID=2">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a href="/MyProjects/Details?projectID=2"><img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" /></a>
                    </div>
                </div>
            </div>
            <div class="projectContainer col-lg-6">
                <div class="innerContainer" style="background-color: #f9fbf8">
                    <div class="projectHeader col-xs-12">
                        Best project ever
                    </div>

                    <div class="hyperButton col-xs-12">
                        <a href="/MyProjects/Details?projectID=1">See more ></a>
                    </div>
                    <div class="projectPictures col-xs-12">
                        <a href="/MyProjects/Details?projectID=1"><img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" /></a>
                    </div>
                </div>
            </div>
    </div>
</div>

        </div>

        <!--FOOTER-->
        <div class="footer">
            <footer>
                <div class="footText">&copy 2018 - Przemyslaw Bak</div>
            </footer>
        </div>
    </div>


    <!--SCRIPTS-->
    <script src="/dist/bundle.js"></script>
    <script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
    <script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</body>
</html>

目前，在向下滚动后，我的页脚看起来像这样(2018 - Przemyslaw Bak)：

​

UPDATE2:我使用的是Bootstrap4，也许它改变了一些东西

css
asp.net-mvc
razor
asp.net-core
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-03 15:34:14

如果你使用bootstrap 4对你有很好的帮助，https://getbootstrap.com/docs/4.0/utilities/flex/#align-self，你需要自己的项目结束，如果你想使用bootstrap，我认为你应该使用这个。

票数 0
EN

Stack Overflow用户

发布于 2018-08-03 07:30:14

去掉这个位置:绝对；在页脚CSS中

代码语言：javascript
复制
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;

}

​

代码语言：javascript
复制
html, body {
    height: 100%;
    overflow-x: hidden;
}
body {
    min-height: 100%;
    position: relative;
}

.footer {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-image: url(/src/img/footBG.png);
    background-repeat: repeat;
    border-top: 3px solid #557DA8;
    height: 75px;
    text-align: center;
}
.footText {
    font-size: 20px;
    position: relative;
    top: 20px;
}
代码语言：javascript
复制
<div class="wrapper">
        <div class="header">
            <!--HEADER-->
        </div>
        <div class="content">
    <!--BODY-->
            <p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p><p>@RenderBody()</p>
        </div>
        <div class="footer">
    <!--FOOTER-->
            <footer>
                <div>Div inside footer</div>
            </footer>
        </div>
    </div>

​

票数 1
EN

Stack Overflow用户

发布于 2018-08-03 17:01:28

在Viktor`s发表评论后，我剥离了我的HTML代码，并开始怀疑我的Bootstrap (以前的4.0.6)搞砸了什么。

所以我开始在谷歌上搜索“同花顺页脚引导”，我找到了这个：Flush footer to the bottom of the page in bootstrap 4

安装Bootstrap 4.1.X文件后，我更改了我的site.css和_Layout.cshtml，如下所示：

代码语言：javascript
复制
body, wrapper {
    min-height: 100vh;
}
footer {
    width: 100%;
    background-image: url(/src/img/footBG.png);
    background-repeat: repeat;
    border-top: 3px solid #557DA8;
    height: 75px;
    text-align: center;
}

.footText {
    font-size: 20px;
    position: relative;
    top: 20px;
}

_Layout.cshtml：

代码语言：javascript
复制
<body>
    <wrapper class="d-flex flex-column">
        //nav bar

        //render body
        <main class="container-fluid py-3 flex-fill">
            @RenderBody()
        </main>
        //footer
        <footer>
            <div class="footText">&copy @DateTime.Now.Year - Przemyslaw Bak</div>
        </footer>
    </wrapper>
//scripts
</body>

而且它起作用了！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51663396

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档