在 col 内时具有最小宽度的 div 的 Bootstrap 水平滚动
[英]Bootstrap horizontal scroll for div with min-width when inside col
问题描述
我希望构建一个带有 3 个列的 bootstrap v4 网格，但是列中的一些内容需要有一个最小宽度。 因此，它们应该有一个水平滚动（溢出-x），但似乎有一些重叠，滚动条和内容出现在 col 之外。 基本上 Col 内容 1（橙色边框）的 div 应该都适合 Col 容器 1（黑色边框）
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="container-fluid"> <div class="row"> <div style="border: solid 1px black" class="col-4"> Col container 1 <div style="min-width: 1000px; overflow-x: scroll;border: solid 1px orange">Col content 1</div> </div> <div style="border: solid 1px blue" class="col-4"> Col container 2 </div> <div style="border: solid 1px yellow" class="col-4"> Col container 3 </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
谢谢
1 个解决方案
解决方案1
0 已采纳 2021-10-14 18:41:08
这就是你要的吗？ 代码是不言自明的。 我确实将新的 css 放在一个.wrapScroll类中，而不是内联中。
您提到需要min-width但我不明白这种需要，所以没有使用min-width 。
.wrapScroll { white-space: nowrap; overflow-x: auto; border: 1px solid orange; }
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <div class="container-fluid"> <div class="row"> <div style="border: solid 1px black" class="col-4"> Col container 1 <div class="wrapScroll">Col content 1 - Let's make this a bit longer for demonstration purposes...</div> </div> <div style="border: solid 1px blue" class="col-4"> Col container 2 </div> <div style="border: solid 1px yellow" class="col-4"> Col container 3 </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
小于最小宽度时的Div滚动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.