html - Bootstrap Flexbox 水平滚动元素不起作用
问题描述
我已经编写了一些 CSS 并使用引导程序创建了一个具有滚动能力的水平 div,但是如果我添加输出不正确
<meta name="viewport" content="width=device-width, initial-scale=1">
在我的代码中
代码输出 我的代码:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
::-webkit-scrollbar {
width: 1px;
height: 0px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.scrolling-wrapper{
overflow-x: auto;
}
.card-block{
height: 200px;
width: 163px;
background-color: #141414;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 8px;
}
.card-block img{
display: block;
border-radius: 50%;
height: 82px;
width: 82px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.card-block span{
display: block;
font-size: 18px;
color: #fff;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}
.card-block a{
background-color: #007bdc;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
margin-right: auto;
margin-left: auto;
text-decoration: none;
color: #fff;
font-size: 12px;
border-radius: 4px;
margin-top: 12px;
}
</style>
<div class="scrolling-wrapper row flex-row flex-nowrap mt-6 pb-6 pt-3">
<div class="col-2">
<div class="card card-block card-1">
<img src="http://placehold.it/80x80">
<span>
Om Prakash
</span>
<a href="#">
More Info
</a>
</div>
</div>
<div class="col-2">
<div class="card card-block card-2">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-3">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-4">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-5">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-6">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-7">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-8">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-9">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-2">
<div class="card card-block card-10">
<img src="http://placehold.it/80x80">
</div>
</div>
</div>
<br/>
<br/>
<br/>
解决方案
尝试使用 col-auto 而不是 col-2 和 mx-0 与 row
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
::-webkit-scrollbar {
width: 1px;
height: 0px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.scrolling-wrapper{
overflow-x: auto;
}
.card-block{
height: 200px;
width: 163px;
background-color: #141414;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 8px;
}
.card-block img{
display: block;
border-radius: 50%;
height: 82px;
width: 82px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.card-block span{
display: block;
font-size: 18px;
color: #fff;
margin-top: 4px;
margin-left: auto;
margin-right: auto;
}
.card-block a{
background-color: #007bdc;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
margin-right: auto;
margin-left: auto;
text-decoration: none;
color: #fff;
font-size: 12px;
border-radius: 4px;
margin-top: 12px;
}
</style>
<div class="scrolling-wrapper row mx-0 flex-nowrap mt-6 pt-3">
<div class="col-auto">
<div class="card card-block card-1">
<img src="http://placehold.it/80x80">
<span>
Om Prakash
</span>
<a href="#">
More Info
</a>
</div>
</div>
<div class="col-auto">
<div class="card card-block card-2">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-3">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-4">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-5">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-6">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-7">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-8">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-9">
<img src="http://placehold.it/80x80">
</div>
</div>
<div class="col-auto">
<div class="card card-block card-10">
<img src="http://placehold.it/80x80">
</div>
</div>
</div>
<br/>
<div> <p>Hello I'm a Text</p></div>
<br/>
<br/>
推荐阅读
- virtual-machine - 如何通过我的自定义网站的一键式按钮在 ESXi 服务器上自动部署虚拟机,该按钮托管在 ESXi 服务器上的一个虚拟机上?
- c# - 先按null排序,再按降序排列
- jms - 如何使用 JMS Correlation ID 识别消息?
- c++ - 如何使用backward-cpp在ARM上获取堆栈跟踪
- excel - 如何在Excel中编写百分比浮动值的IF语句
- solarwinds-orion - 查询以获取前 15 个最消耗带宽的对话
- google-bigquery - Parquet `write_table` 在写入输出文件时将数据类型的键引入数据
- database-design - 软件设计:带有定制产品的购物车
- android - RoundedRectangleBorder 在颤动中不能与 ListTile 或 Card 一起使用
- azure - 防止 CosmosDB 文档中的数组换行符