加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – 在引导列中创建页脚

发布时间：2020-12-14 19:33:07 所属栏目：资源 来源：网络整理
导读：我使用这个引导模板 here为我的应用程序创建一个页面. 在中心列(col-sm-7)中,我将会有一个表单,我想在底部创建一个页脚/导航栏/区域,这固定在底部,以便我可以添加按钮(例如保存,接下来,回来). 我正在尝试不同的东西,如页脚元素,一个引导导航栏,带有“navbar-
我使用这个引导模板 here为我的应用程序创建一个页面.
在中心列(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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同