文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >将包含6个元素的2行div粘贴到视口底部，使其居中并与页面调整大小。

问将包含6个元素的2行div粘贴到视口底部，使其居中并与页面调整大小。
EN

Stack Overflow用户
提问于 2022-07-07 15:18:16
回答 2查看 37关注 0票数 2

我能找到的其他答案似乎对我都没有用，但我还是觉得我会问。我正在尝试将2行6个元素放到页面底部，并在页面滚动时将它们粘贴在那里。如果我像下面这样做，用一张桌子，它几乎可以工作。

​

代码语言：javascript
运行
复制
.center {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  bottom: 10px;
  margin-bottom: 10px;
  flex-shrink: 2;
  padding-bottom: 10px;
}
代码语言：javascript
运行
复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<div class="fixed-bottom center">
  <table border="1" class="center">
    <tr>
      <th>
        <h4>Val1</h4>
      </th>
      <th>
        <h4>Val2</h4>
      </th>
      <th>
        <h4>Val3</h4>
      </th>
      <th>
        <h4>Val4</h4>
      </th>
      <th>
        <h4>Val5</h4>
      </th>
      <th>
        <h4>Val6</h4>
      </th>
    </tr>
    <tr>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
    </tr>
  </table>
</div>

​

任何关于如何实现我想要的有用的建议都会被感激地收到！

谢谢

J

html
css
bootstrap-5
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-07-07 16:14:13

为此，您不需要任何外部CSS (除了我为演示这一功能而添加的间隔)。我建议使用一个弹性框，这样您就可以在屏幕大小缩小时包装元素，而不是把它们丢到一边，或者缩小到输入字段太小而无法使用的程度。

固定底部的部分起作用了，这就是你所需要的。如果你滚动，你会看到底部部分保持在底部。

我还建议从输入字段中删除默认填充，这样布局就不会混乱，因此每个字段上都会出现p-0。

有关使用的任何类的相关信息都可以在帮助文档中找到：https://getbootstrap.com/docs/5.0/getting-started/introduction/基本上有一个类，用于引导5中的所有内容

​

代码语言：javascript
运行
复制
.spacer {
  height: 1000px;
}
代码语言：javascript
运行
复制
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<body class="bg-dark">
  <div class="spacer">
  </div>
  <div class="fixed-bottom d-flex flex-wrap pt-2 pb-2 justify-content-center align-items-center w-100 border bg-light gap-3">
    <div class="row-sm">
      <h4>Val1</h4>
      <input class="p-0 border-dark form-control" type="text" />
    </div>
    <div class="row-sm">
      <h4>Val2</h4>
      <input class="p-0 border-dark form-control" type="text" />
    </div>
    <div class="row-sm">
      <h4>Val3</h4>
      <input class="p-0 border-dark form-control" type="text" />
    </div>
    <div class="row-sm">
      <h4>Val4</h4>
      <input class="p-0 border-dark form-control" type="text" />
    </div>
    <div class="row-sm">
      <h4>Val5</h4>
      <input class="p-0 border-dark form-control" type="text" />
    </div>
    <div class="row-sm">
      <h4>Val6</h4>
      <input class="p-0 border-dark form-control" type="text" />
    </div>
  </div>
</body>

​

票数 0
EN

Stack Overflow用户

发布于 2022-07-07 15:35:00

  • Set .keepAtBottom to position:fixed和set bottom:0，正如您刚才提到的，您可以将相同的值设置为left和right，目前我刚刚将其设置为0，可以根据您的需要将其增加，只需给左、右

相同的正值即可。

​

代码语言：javascript
运行
复制
.keepAtBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f5f5f5;
}
代码语言：javascript
运行
复制
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi nunc, vehicula nec congue sit amet, convallis non ante. Quisque tortor eros, lobortis auctor magna eu, rhoncus molestie velit. Nulla sapien enim, tristique vel vestibulum vitae, dapibus
      at nisi. Morbi tempus accumsan felis, dapibus consectetur augue varius ac. Curabitur in purus eros. Etiam a magna ipsum. Aenean est augue, congue a dui ut, pulvinar convallis est. Nam eget commodo justo. Sed malesuada metus ante, ut sodales dui
      egestas nec. Nulla sed pharetra sem. Pellentesque nec ipsum iaculis, porttitor elit et, pharetra velit. Sed id metus ultrices, vulputate nulla id, efficitur ante. Morbi eget ultrices libero. In eget commodo velit. Integer lacinia efficitur vulputate.
      Phasellus quis euismod leo. Maecenas laoreet tempor leo, at interdum purus euismod nec. Suspendisse potenti. Sed eu erat tortor. Nam dictum aliquet arcu non aliquet. Nulla non fermentum sem. Duis mollis eros ac facilisis posuere. Nullam ipsum turpis,
      bibendum a odio ut, lacinia facilisis ante. Nulla ultricies lacinia hendrerit. Aenean vitae varius lectus. Nulla facilisi. Nunc mattis pretium dui at pretium. Integer in sem pretium est tempus semper ut nec mi. Maecenas consequat ex at arcu elementum
      semper. In metus sem, tempor in consectetur in, porta nec turpis. Quisque facilisis nisi at ultrices aliquet. Aliquam vitae nisi quis eros condimentum sodales. Suspendisse quis auctor mauris. Aliquam aliquam neque sit amet urna venenatis, in tristique
      lorem condimentum. Suspendisse nibh quam, pellentesque ac mi porttitor, faucibus sagittis elit. Nam cursus nunc eget ligula fringilla, non pretium lacus porta. Vestibulum maximus elit id euismod convallis. Morbi molestie mi sem, non tincidunt libero
      scelerisque sed. Donec mattis sed massa eu maximus. Sed pulvinar eu libero sed rutrum. Mauris tristique tellus gravida libero varius cursus. Proin convallis elit in dui aliquam, a euismod erat imperdiet. Donec pharetra tempus nisi, a congue urna
      cursus congue. Sed semper accumsan sem et viverra. Sed convallis sodales nisl, sed vulputate erat lacinia ac. Quisque nunc lectus, finibus nec nunc in, ultrices bibendum justo. Curabitur elit erat, iaculis ac justo in, iaculis consectetur nibh.
      Pellentesque consequat enim in turpis tincidunt consequat. Suspendisse faucibus purus tellus, hendrerit molestie magna volutpat a. Nullam egestas pulvinar diam, ut dictum sapien faucibus a. Ut sit amet ornare mauris. Nam eget dui in quam faucibus
      porttitor. Nulla sodales nulla nulla, sit amet pretium ipsum aliquet vitae. Vivamus laoreet commodo aliquet. Proin vitae mauris malesuada, vulputate risus a, semper risus. Nullam nec luctus dui, non pharetra neque. Morbi mauris neque, aliquam gravida
      velit quis, molestie viverra nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce imperdiet ultricies mauris a tempus. Maecenas nec diam ut ante viverra pulvinar non eget arcu. Sed dui justo, varius
      et arcu nec, hendrerit tempor arcu. Sed ornare at sem in pharetra. Vivamus vitae mi et quam fringilla convallis. Nam tempor, nunc eu porttitor pellentesque, diam nisl condimentum lectus, eget ultricies quam nulla eget odio. Sed vehicula purus sem,
      nec mollis sem luctus eget. Proin porta nulla gravida, tempus leo et, porttitor elit. Suspendisse sit amet pretium justo, at convallis mauris. Nullam sit amet nisl maximus, pellentesque nulla non, consectetur odio. Nam sed nulla sit amet felis mattis
      rhoncus. Proin dui odio, finibus at vehicula in, gravida nec lacus. Sed sit amet cursus arcu. Nullam pharetra sed eros id pellentesque. Ut laoreet iaculis luctus. Praesent sed lorem sem. Vestibulum quis libero euismod, bibendum dolor ut, finibus
      tortor. Pellentesque in pulvinar tortor. Cras vitae luctus elit. Nunc turpis ipsum, finibus at viverra non, ornare et diam. Cras finibus mattis lacus, vel scelerisque orci maximus quis. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Vivamus sem arcu, viverra vel scelerisque quis, maximus interdum ante. Aliquam auctor leo sed massa aliquet, pulvinar tempor diam malesuada. Sed hendrerit nibh id tellus molestie, at aliquam elit pharetra. Maecenas
      et feugiat ipsum. Duis sed nunc ipsum. Vestibulum at arcu ipsum. Nulla at orci erat. Donec vestibulum, risus vitae placerat ullamcorper, libero ligula laoreet felis, a condimentum mi purus vitae risus. Nam diam magna, mattis et finibus at, placerat
      sed leo. Donec quis elementum nibh. Donec luctus interdum ex, non malesuada mi eleifend eu. Nunc laoreet in arcu ac dignissim. Vivamus efficitur sed purus vel iaculis. Mauris sit amet lobortis mauris. Mauris lobortis sodales lacus sed vehicula.
      Suspendisse potenti. Mauris lobortis urna eu ligula pretium porta. In bibendum a risus nec sagittis. Nullam eget consectetur lectus. In ex sapien, tempus eget magna vel, tempor porta tortor. Fusce id dignissim ex. Cras finibus libero vitae fringilla
      pretium.
    </p>
  </div>
  <div class="row keepAtBottom">
    <div class="col-4">
      <h1>value
      </h1>
      <input type="text" class="form-control" />
    </div>
    <div class="col-4">
      <h1>value
      </h1>
      <input type="text" class="form-control" /></div>
    <div class="col-4">
      <h1>value
      </h1>
      <input type="text" class="form-control" /></div>
    <div class="col-4">
      <h1>value
      </h1>
      <input type="text" class="form-control" /></div>
    <div class="col-4">
      <h1>value
      </h1>
      <input type="text" class="form-control" /></div>
    <div class="col-4">
      <h1>value
      </h1>
      <input type="text" class="form-control" /></div>
  </div>
</div>

​

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

https://stackoverflow.com/questions/72900385

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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