Question

我正在使用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;
}

Answer 1

是的，我认为滴水是正确的。查看网格上的Bootstrap docs。订单应该是容器＆gt;行＆gt;列，但如果只需要一个全宽列，则不需要列类。这将有效：

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

Answer 2

您错过了添加row支票this

HTML

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

浮动到列的页脚

2 个答案: