我使用这个引导模板
here为我的应用程序创建一个页面.
在中心列(col-sm-7)中,我将会有一个表单,我想在底部创建一个页脚/导航栏/区域,这固定在底部,以便我可以添加按钮(例如保存,接下来,回来).
在中心列(col-sm-7)中,我将会有一个表单,我想在底部创建一个页脚/导航栏/区域,这固定在底部,以便我可以添加按钮(例如保存,接下来,回来).
我正在尝试不同的东西,如页脚元素,一个引导导航栏,带有“navbar-fixed-bottom”,一个平原的行,其中有一个div,bootom为0,位置是固定的,但似乎没有正常工作
问题是当我添加上述任何这些样式时,固定在底部的元素的宽度不会停留在中心(col-sm-7)列中.它最终跨越整个页面或不够.我只是不能让它被包含在居中的列
任何建议在这里得到的东西,任何东西,固定在只有中心列的底部,所以我可以把按钮在它将是有益的！
这是我迄今为止尝试过的一个例子
这是一个页脚.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> /* Set black background color,white text and some padding */ footer { background-color: #555; color: white; padding: 15px; } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Messages</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group input-group"> <input type="text" class="form-control" placeholder="Search.."> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a></li> </ul> </div> </div> </nav> <div class="container text-center"> <div class="row"> <div class="col-sm-3 well"> <div class="well"> <p><a href="#">My Profile</a></p> <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="well"> <p><a href="#">Interests</a></p> <p> <span class="label label-default">News</span> <span class="label label-primary">W3Schools</span> <span class="label label-success">Labels</span> <span class="label label-info">Football</span> <span class="label label-warning">Gaming</span> <span class="label label-danger">Friends</span> </p> </div> <div class="alert alert-success fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <p><strong>Ey!</strong></p> People are looking at your profile. Find out who. </div> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> </div> <div class="col-sm-7"> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default text-left"> <div class="panel-body"> <p contenteditable="true">Status: Feeling Blue</p> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-thumbs-up"></span> Like </button> </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>John</p> <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,but now I forgot it. Ahh,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Bo</p> <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Jane</p> <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Anja</p> <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <footer style="bottom: 0; position: fixed" class="container-fluid text-center"> <p>Footer Text</p> </footer> </div> <div class="col-sm-2 well"> <div class="thumbnail"> <p>Upcoming Events:</p> <img src="paris.jpg" alt="Paris" width="400" height="300"> <p><strong>Paris</strong></p> <p>Fri. 27 November 2015</p> <button class="btn btn-primary">Info</button> </div> <div class="well"> <p>ADS</p> </div> <div class="well"> <p>ADS</p> </div> </div> </div> </div> </body> </html>
这是一个导航栏,但它跨越页面的整个宽度.不是中心柱.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div style="border: 1px solid black;" class="navbar navbar-fixed-bottom"><button>save</button></div> </div> <div class="col-sm-2 well"> <div class="thumbnail"> <p>Upcoming Events:</p> <img src="paris.jpg" alt="Paris" width="400" height="300"> <p><strong>Paris</strong></p> <p>Fri. 27 November 2015</p> <button class="btn btn-primary">Info</button> </div> <div class="well"> <p>ADS</p> </div> <div class="well"> <p>ADS</p> </div> </div> </div> </div> </body> </html>
解决方法
首先你需要了解基本的结构,你不需要把页脚放在-col类中,看看结构
<header>
<nav>
<!-- Put the navbar here -->
</nav>
</header><!-- Header -->
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
</div><!-- .left items like my profile etc.. -->
<div class="col-sm-7">
</div><!-- . main content section here-->
<div class="col-sm-2">
</div><!-- /. upcomming section will be here -->
</div><!-- /.row -->
</div><!-- /.container -->
</section> <!-- /.content section -->
<footer>
</footer><!-- footer always stay at bottom -->
我已经像你一样改变你的代码
header,.full-width {
float: left;
width: 100%;
}
footer {
background-color: #555;
color: white;
padding: 15px;
border: 1px solid black;
text-align: center;
}
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <header> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a> </li> <li><a href="#">Messages</a> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group input-group"> <input type="text" class="form-control" placeholder="Search.."> <span class="input-group-btn"> <button class="btn btn-default" type="button"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a> </li> </ul> </div> </div> </nav> </header> <section class="full-width"> <div class="container text-center"> <div class="row"> <div class="col-sm-3 well"> <div class="well"> <p><a href="#">My Profile</a> </p> <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar"> </div> <div class="well"> <p><a href="#">Interests</a> </p> <p> <span class="label label-default">News</span> <span class="label label-primary">W3Schools</span> <span class="label label-success">Labels</span> <span class="label label-info">Football</span> <span class="label label-warning">Gaming</span> <span class="label label-danger">Friends</span> </p> </div> <div class="alert alert-success fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <p><strong>Ey!</strong> </p> People are looking at your profile. Find out who.</div> <p><a href="#">Link</a> </p> <p><a href="#">Link</a> </p> <p><a href="#">Link</a> </p> </div> <div class="col-sm-7"> <div class="row"> <div class="col-sm-12"> <div class="panel panel-default text-left"> <div class="panel-body"> <p contenteditable="true">Status: Feeling Blue</p> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-thumbs-up"></span> Like</button> </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>John</p> <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Bo</p> <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Jane</p> <img src="bandmember.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="well"> <p>Anja</p> <img src="bird.jpg" class="img-circle" height="55" width="55" alt="Avatar"> </div> </div> <div class="col-sm-9"> <div class="well"> <p>Just Forgot that I had to mention something about someone to someone about how I forgot something,forget it! Or wait. I remember.... no I don't.</p> </div> </div> </div> </div> <div class="col-sm-2 well"> <div class="thumbnail"> <p>Upcoming Events:</p> <img src="paris.jpg" alt="Paris" width="400" height="300"> <p><strong>Paris</strong> </p> <p>Fri. 27 November 2015</p> <button class="btn btn-primary">Info</button> </div> <div class="well"> <p>ADS</p> </div> <div class="well"> <p>ADS</p> </div> </div> </div> </div> </section> <footer> <button>save</button> </footer> </body> </html>
