Css 如何使引导列可滚动？_Css_Bootstrap 4

Css 如何使引导列可滚动？

css bootstrap-4

Css 如何使引导列可滚动？,css,bootstrap-4,Css,Bootstrap 4,我想让这张卡片可以x-滚动。但在三个块之后，第四个块将在新行中渲染。我想水平滚动。在过去的5天里，我尝试了一切 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="ie=edge" http-equiv="x-ua-compatible"> <title></title> &l

我想让这张卡片可以x-滚动。但在三个块之后，第四个块将在新行中渲染。我想水平滚动。在过去的5天里，我尝试了一切

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <title></title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper d-flex">
        <div class="p-4 pt-5" id='content' style="width:100%">
            <div class="container-fluid">

                <div class="container-fluid">
                    <h2><strong>Please make this scrollable horizonally</strong></h2>
                    <div class="card card-section">
                        <div class="card-header">
                            Heading
                        </div>
                        <div class="card-body">
                            <form method="post">
                                <div class='container-fluid'>
                                    <div class='row customClass'>
                                        <div class='col-md-4'>
                                                <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
                                        </div>
                                        <div class='col-md-4'>
                                            <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
                                        </div>
                                        <div class='col-md-4'>
                                            <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
                                        </div>
                                        <div class='col-md-4'>
                                            <div style='width:300px;background-color:green;height: 500px; margin: 10px;'></div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</body>
</html>

Codepen链接：

只需删除row类即可。使用您刚刚删除的类，就像boom所做的一样

如果你想改变你的方法，请告诉我。

祝你好运

引导程序4使用flex。如果要覆盖引导行的包装系统，则必须使用flex wrap:nowrap；为了划船。

.row.customClass{
溢出-x：自动；
柔性包装：nowrap；
}


请使此页面水平滚动
标题

我删除了

col-md-4

类，并将宽度设置为

customClass

。卡体{
溢出-x：滚动；
}
.customClass{
宽度：1500px；
}


请使此页面水平滚动
标题

它现在可以工作了，但显示屏在右侧延伸。实际上，它是django项目中的一个代码部分。我想不出怎么做。将此->

更改为->

流体将使其。。。流体，这意味着将根据内容物改变其大小。我希望这能解决它：）

.customClass {
  overflow-x: auto;
  white-space: nowrap;
}
.customClass .col-md-4 {
  display: inline-block;
    float: none;
}