英文:
Bootstrap 4 Flexbox Horizontal Scrolling Cards NOT working with less then 8 cards
问题
以下是您要翻译的内容：
Issue # 1: Unless there are a minimum of 8 cards, the cards are not filling the horizontal flexbox 'visible' window properly.
问题1：除非至少有8张卡片，否则卡片不会正确地填充水平伸缩框的“可见”窗口。
Issue 2: if the content in the card pushes the Button, how can I fill it with space, so that the buttons are in line?
问题2：如果卡片中的内容推动按钮，如何填充它以使按钮在一行中？
@CBroe you gave the cue, i added .row { width:100%; max-width:100vw; }
@CBroe，您给了提示，我添加了.row { width:100%; max-width:100vw; }
英文:
Having an issue with Bootstrap 4 flexbox in creating horizontally scrollable cards on Desktop Screens ( works okay on mobile responsive mode):
Issue # 1: Unless there are a minimum of 8 cards, the cards are not filling the horizontal flexbox 'visible' window properly
<br>Case A: 3 cards, the flexbox window is totally skewed and the 'badge' from below bills in there.
<br> Case B: 7 cards, flexbox is almost filled, but there is a gap on left side. <br> Case C: 8 cards, all perfect , visible & scrolling perfectly.
Issue 2: if the content in the card pushes the Button, how can I fill it with space, so that the buttons are in line?
@CBroe you gave the cue, i added .row { width:100%; max-width:100vw; }
and now it is working as expected , updating the
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
padding: 5px;
}
img {
border-radius: 50%;
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top: -14px;
}
.forlabeldiv {
border: solid;
border-width: 1px;
border-radius: 5px;
<!-- margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
-->margin: 0, auto;
width: 100%;
text-align: center;
}
.forlabelspan {
color: #0275d8;
background: white;
font-size: 14px;
font-weight: 800;
}
.btn {
width: 30%;
text-align: center margin-bottom:5px
}
.card-block {
min-height: 20vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
font-size: 0.75em;
}
.card {
height: 100%;
}
.row {
width: 100%;
max-width: 100vw;
}
.badge {
width: 10rem;
flex: 1 0 auto;
font-size: 1em;
font-weight: 300;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Case A: Horizontal Scrolling Cards with 3 cards</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto ">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
<!----------------------xxxxxxx---------------------------->
<h2>Case B: Horizontal Scrolling Cards with 7 cards </h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>4 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>5 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>6 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>7 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
<!----------------------xxxxxxx---------------------------->
<h2> Case C: Horizontal Scrolling Cards with 8 cards</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>4 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>5 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>6 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>7 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>8 <br> Title of Person<br> Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto mt-auto">BOOK</a>
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- end snippet -->
答案1
得分: 1
使用专家的建议，解决了以下问题：
- 添加了
.row { width:100%; max-width:100vw; }以确保即使有3张卡片，flex-box的宽度也不会缩小。 - 添加了
d-flex flex-auto到卡片和mt-auto以确保按钮出现在同一行。
谢谢。
英文:
Using cues from experts here, resolved the issues:
- Added .row { width:100%; max-width:100vw; } to ensure even with 3 cards the width of the flex-box doesn't shrink.
- Added d-flex flex-auto to card & mt-auto to ensure buttons appear in same line
Thank you
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论