gpt4 book ai didi

html - 页脚向上 float 到列中

转载 作者:太空宇宙 更新时间:2023-11-03 23:33:31 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 列来布置我的管理页面,但我在让页脚留在底部时遇到了一些问题。由于某种原因,尽管未包含在列结构中,但页脚一直飞到第二列的底部而不是在列下方。为什么会发生这种情况?

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administration</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

<script src="/Scripts/modernizr-2.6.2.js"></script>


<link href="/Content/Administration.css" rel="stylesheet"/>



</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Football Pool 2014</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/Rules">Rules</a></li>
<li><a href="/Results">Results</a></li>
<li><a href="/Home/SelectPerson?w=False">Weekly Picks</a></li>
<li><a href="/Home/SelectPerson?w=True">Winners Pool</a></li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="xxx" /> <ul class="nav navbar-nav navbar-right">
<li><a href="/Administration">Administration</a></li>
<li>
<a href="/Account/Manage" title="Manage">Hello User!</a>
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">




<h2>Administration</h2>

<div>

</div>

<div>
<div class="col-md-6">
<a class="adminButton" href="/Home/CreatePerson">Create Person</a>
<a class="adminButton" href="/Administration/UpdateOrDeletePerson">Update or Delete Person</a>
<a class="adminButton" href="/Administration/ManageResults">Manage Results</a>
</div>
<div class="col-md-6">
<a class="adminButton" href="/Administration/UpdateWeeklyPicks">Manage Weekly Picks</a>
<a class="adminButton" href="/Administration/UpdateWinnersPicks">Manage Winners Picks</a>
</div>
</div>



<hr />
<footer>
<p>&copy; 2014 - us</p>
</footer>
</div>

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"xxx"}
</script>
<script type="text/javascript" src="http://localhost:123/xxx/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

CSS:

body {

}

.adminButton
{
display:block;
background-color:#0072C6;
padding:30px;
width:300px;
border-radius:5px;
text-align:center;
font-size:20pt;
margin:1px;
color:#FFFFFF;
font-family:'Segoe UI Light';
}
.adminButton:hover
{
background-color:#1E82CC;
text-decoration:none;
color:#FFFFFF;
}
.adminButton:active
{
background-color:#212121;
}

最佳答案

是的,我认为点滴是正确的。查看 Bootstrap docs在网格上。顺序应该是 container > row > column,但如果您只想要一个全宽列,则不需要 column 类。这将起作用:

<div class="row">
<footer>
<hr />
<p>&copy; 2014 - us</p>
</footer>
</div>

关于html - 页脚向上 float 到列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24716534/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com