【发布时间】：2019-03-26 19:09:04
【问题描述】：
我正在尝试制作卡片轮播，但在保持内容可读性方面存在问题。这是我当前的代码：
.news-article {
font-family: 'Muli', sans-serif;
font-size: 0.725rem;
font-weight: normal;
line-height: 1.19;
text-align: left;
color: #333333;
}
.news-source{
font-family: 'Muli', sans-serif;
font-size: 0.675rem;
font-weight: 800;
line-height: 1.19;
text-align: left;
color: #333333;
}
.white-background{
background-color: transparent !important;
border-top: none !important;
}
.card-footer{
background-color: #fff;
}
@media only screen and (max-width: 813px) {
.white-background{
background-color: transparent !important;
border-top: none !important;
}
.article{
width: 400px !important;
height: 100px !important;
}
.news-box{
overflow: hidden;
}
}<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="pt-3">
<div class="row news-box no-margin flex-row flex-nowrap">
<div class="card shadow-sm article col m-2">
<div class="card-body">
<div class="news-article">
The Economic Times
</div>
</div>
<div class="card-footer white-background">
<div class="news-source">
The Economic Times
</div>
</div>
</div>
<div class="card shadow-sm article col m-2">
<div class="card-body">
<div class="news-article">
VcCircle
</div>
</div>
<div class="card-footer white-background">
<div class="news-source">
VcCircle
</div>
</div>
</div>
</div>
</div>
</body>
</html>如何使它具有相同的卡片宽度可滚动？
我尝试为每张卡使用col-md-4 col-sm-6 col-xs-6 而不是col，但它不起作用。
我需要宽度等于浏览器中的 col-md-4 和 PC's 的宽度，但手机中的宽度是 col-xs-6。
任何帮助将不胜感激。
提前致谢。
【问题讨论】：
-
您使用的是哪个版本的引导程序？
-
嘿@Jake，
4.3.1 -
对作者的评论：有人对您的帖子进行了编辑并将
<div className="...">更改为<div class="...">。我试图拒绝更改，但它已得到其他 SO 用户的批准。 -
这只是为了更容易编辑和交互
-
@Jake 如果您指的是我的评论：请参阅 Nithin 对指向“不正确属性”的下一个答案的评论，他说他的
className属性是正确的jsx符号。如果您只是认为如果不确定语法的起源可能更容易编辑，则不应更改某人的代码。
标签： html css twitter-bootstrap