如何防止牌组在引导程序中出现故障

Question

我正在尝试用垂直工具栏和卡片组制作一行。我给了工具栏colsm的一半，这一行的其余部分应该是卡片组的。牌组div一直向下，并且不在同一行。我该怎么修？

它应该是这样的：卡片组

希望你能帮我找出问题所在：/

这是代码：

<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;

}

Answer 1

我是新手，所以我无法创建最小的可复制示例。当我在代码片段上运行代码时，它不会给我在浏览器中得到的结果。无论如何，我找到了如何修复它。我只需要在第一行分区中添加flex nowrap。

<div className="row flex-nowrap">