文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Bootstrap Flexbox水平滚动元素不工作

问Bootstrap Flexbox水平滚动元素不工作
EN

Stack Overflow用户
提问于 2021-11-15 16:31:52
回答 1查看 44关注 0票数 1

我已经写了一些CSS，并使用bootstrap创建了一个具有滚动功能的水平div，但如果我添加<meta name="viewport" content="width=device-width, initial-scale=1">，则输出不正确。

在我的代码中

Code Output我的代码：

​

代码语言：javascript
复制
<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/>

​

html
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-15 17:21:49

尝试对row使用col-auto而不是col-2和mx-0

​

代码语言：javascript
复制
    <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/>

​

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

https://stackoverflow.com/questions/69977753

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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