如何防止卡片组在引导程序中下降
Posted
技术标签:
【中文标题】如何防止卡片组在引导程序中下降【英文标题】：how to prevent card deck from going down in bootstrap 【发布时间】：2021-07-25 18:57:49 【问题描述】：我正在尝试用垂直工具栏和卡片组排成一行。我给了工具栏 col-sm-half，其余的行应该是卡片组。卡片组 div 不断下降，并且不会留在同一行。我该如何解决？
它应该看起来像这样： card deck
希望你能帮我找出问题所在：/
代码如下：
<div className="container-fluid">
<div className="row">
<div className="col-sm-half toolbar-col " id="v-toolbar-col">
<ul id="v-toolbar" className="list-inline">
<li>
<button type="button" className="btn btn-primary btn-rounded btn-icon "><i className="fas fa-plus fa-sm"></i></button>
</li>
<li>
<button type="button" className="btn btn-primary btn-rounded btn-icon"><i
className="fas fa-filter fa-xs"></i></button>
</li>
<li>
<button type="button" className="btn btn-primary btn-rounded btn-icon"><i
className="fas fa-search fa-sm"></i></button>
</li>
</ul>
</div>
<div className="col-auto cards-col" >
<div className="row cards-row " >
<div className="col-md-12 card-deck flex-nowrap overflow-auto">
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
<div className="card-body">
<div className="card-toolbar">
<a className="close float-left" href="#">x</a>
<a className="card-menu" href="#">
<i className="fas fa-ellipsis-h fa-sm"></i>
</a>
</div>
<h1 className="arabic-name">some text here</h1>
<h2 className="english-name">some text here</h2>
<h2 className="country-name">country</h2>
<i className="fas fa-users card-icon "></i>
</div>
</div>
</div>
</div>
</div>
</div>
这里是css
.container-fluid
background-color: yellow;
.row
background-color: #61dafb;
#v-toolbar-col
background-color: #9a1032;
text-align: center;
.btn.btn-rounded
border-radius: 30px;
background-color: midnightblue;
border: none;
color: whitesmoke;
margin-bottom: 3px;
display: inline-block;
ul
background-color: yellow;
list-style: none;
padding-top: 5px;
justify-content: center;
li
list-style: none;
.cards-col
background-color: chartreuse;
.cards-row
background-color: #a583c4;
.card-deck
background-color: #61dafb;
.cards-row .card-body
border-radius: 5px;
background-color: yellow;
min-width: 200px;
min-height: 120px;
max-width: 200px;
max-height: 120px;
color: #9a1032;
padding: 0.2rem;
font-size: 12px;
flex: 0 auto;
margin-left: 10px;
.card-body .close
font-size: small;
padding-top: 2px;
padding-left: 3px;
.card-body .card-menu
font-size: small;
padding-left: 5px;
opacity: 1;
.card-body .card-icon
font-size: 3em;
opacity: 10%;
top: 0px;
right: 0;
bottom: 100px;
left: 10px;
.fas
line-height: 0;
h1,h2
text-align: right;
margin-right: 10px;
.card-body .arabic-name
font-size: 1.2em;
margin-top: 0.5rem;
.card-body .english-name
font-size: 1em;
.card-body .country-name
font-size: 1em;
【问题讨论】：
请创建minimal reproducible example 欢迎来到 Stack Overflow。您能否为需要创建的内容添加更多详细信息。我认为您需要创建的是将黄色工具栏内的三个按钮居中。对吗？ 按钮按我的意愿定位。我正在尝试创建以下组件。 ibb.co/3Nmw6L4 【参考方案1】：我是新手，所以我无法创建最小的可重现示例。当我在 sn-p 上运行代码时，它不会给我在浏览器中得到的相同结果。无论如何，我发现了如何解决它。我只需要将 flex-nowrap 添加到第一行 div。
<div className="row flex-nowrap">
【讨论】：
以上是关于如何防止卡片组在引导程序中下降的主要内容，如果未能解决你的问题，请参考以下文章