【发布时间】：2021-12-26 20:35:48
【问题描述】：
我已经编写了一些 CSS 并使用引导程序创建了一个具有滚动能力的水平 div，但是如果我添加输出不正确
<meta name="viewport" content="width=device-width, initial-scale=1">
在我的代码中
Code Output 我的代码：
<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/>【问题讨论】：
-
您好，欢迎来到 Stack Overflow！一切似乎都按描述运行。你能详细说说你的问题是什么吗？水平滚动似乎在 sn-p 和 fiddle 中起作用。
-
我想要这样的输出 link 但是当我添加 Meta 视口标签时，所有卡片都会被覆盖。 @卡梅隆
标签： html css twitter-bootstrap