在视口的底部粘贴2行，与6个元素的2行粘在一起，以页面为中心和尺寸
我发现的其他答案似乎对我有用，但是无论如何我都会问。我试图将2行的6行放到页面的底部，并在页面滚动时将它们粘贴在那里。如果我像以下桌子一样这样做，它几乎可以工作。
.center {
position: -webkit-sticky;
/* Safari */
position: sticky;
bottom: 10px;
margin-bottom: 10px;
flex-shrink: 2;
padding-bottom: 10px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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。
None of the other answers I can find seem to work for me, but thought I'd ask anyway. I'm trying to get 2 rows of 6 elements to the bottom of the page and stick them there as the page scrolls. If I do it like the following, with a table, it almost works.
.center {
position: -webkit-sticky;
/* Safari */
position: sticky;
bottom: 10px;
margin-bottom: 10px;
flex-shrink: 2;
padding-bottom: 10px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>Any helpful tips on how to achieve what I want would be gratefully received!
Thanks
J
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您不需要任何外部CSS（除了我添加的垫片以证明这起作用）。我建议使用flex-box，以便当屏幕尺寸缩小而不是将它们丢失到侧面或将其缩放到输入字段太小而无法用处时，可以包装元素。
固定的部分在起作用，这实际上就是您所需要的。如果滚动，您会看到底部停留在底部。
我还建议从输入字段中删除默认填充物，以免与布局混乱，因此每个一个上的
p-0。有关所使用的任何类的相关信息，请参见帮助文档： https：/ /getbootstrap.com/docs/5.0/getting-started/introduction/ 基本上有一个班级Bootstrap 5
You don't need any external CSS for this (except the spacer that I added to demonstrate that this works). I'd recommend using a flex-box so you can wrap the elements when the screen size shrinks rather than lose them to the sides or scale them down to the point where the input fields would be too small to be useful.
The fixed-bottom part was working and that's really all you need for that. If you scroll, you'll see that the bottom section stays at the bottom.
I'd also suggest removing the default padding from the input fields just so it doesn't mess with the layout, hence the
p-0on each one.Relevant information on any of the classes used can be found in the help docs: https://getbootstrap.com/docs/5.0/getting-started/introduction/ There's basically a class for just about everything in Bootstrap 5
.epeatbottomto位置：固定和set底部：0，如您所提到/code>和右当前我刚刚将其设置为0 ou可以根据您的需要增加它，并且只需给予左右的正值.keepAtBottomtoposition:fixedand setbottom:0and as u have mentioned you can set same value to bothleftandrightcurrently I have just set it to 0 ou can increase it as per your need and just give same positive value to both left and right