如何防止卡片组在引导程序中下降

Question

我正在尝试用垂直工具栏和卡片组排成一行。我给了工具栏 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;


}

Answer 1

我是新手，所以我无法创建最小的可重现示例。当我在 sn-p 上运行代码时，它不会给我在浏览器中得到的相同结果。无论如何，我发现了如何解决它。我只需要将 flex-nowrap 添加到第一行 div。

<div className="row flex-nowrap">