Javascript 如何修复引导卡格式？

我想把我的卡片排成一行，如图所示，我通常使用bootstrap row类，但当我在下面的代码上这样做时，它会水平收缩卡片

我使用的是bootstrap4.3和jquery3.4

我已经尝试使用col类来增加宽度

<div id='filters' class='sections'>
      <div class='filter-attributes'>
        <h4>Type</h4>
        <input type='checkbox' name='type' id='skill' value='skill' >Skill</input>
        <input type='checkbox' name='type' id='passion' value='passion' >Passion</input>
        <input type='checkbox' name='type' id='course' value='course' >Course</input>
        <input type='checkbox' name='type' id='job' value='education' >Education</input>
      </div>
      <div class='filter-attributes'>
        <h4>Personality</h4>
        <input type='checkbox' name='personality' id='large' value='istj' >ISTJ</input>
        <input type='checkbox' name='personality' id='small' value='esfj' >ESFJ</input>
      </div>
      <div>
        <br>
        <input type='button' id='none' value='Clear all'></input>
      </div>
    </div>

<div class="container">
    <div class='sections'>
            <div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card A</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
                    </div>
                </div>
      </div>
      <div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card Two</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    </div>
                </div>
            </div>
  </div>

我希望卡片以默认的卡片宽度水平排列

<div class="container">
    <div class='sections'>
            <div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card A</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
                    </div>
                </div>
      </div>
      <div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card Two</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    </div>
                </div>
            </div>
  </div>

卡片A
字幕
此卡片具有以下支持文本，作为附加内容的自然引入
第二张牌
字幕
此卡片具有以下支持文本，作为附加内容的自然引入

到

卡片A
字幕
此卡片具有以下支持文本，作为附加内容的自然引入
第二张牌
字幕
此卡片具有以下支持文本，作为附加内容的自然引入

---

不需要添加新的div来创建一行，只需将类添加到第二个div

中，您的示例中似乎缺少了

的结束符。即使它在那里，您仍然需要在下一行使用

。最后，您的其他css类，如

部分

，可能是您无法获得所需结果的原因。你能添加你的.css，最好是你的代码的fiddle/codepen吗？谢谢没有cssI对@SergeyKudriavtsev进行了简单的更改来修复它。谢谢你看起来我今天第二次玩了：-我很高兴你能把它修好。请回答您自己的问题，以便其他有类似问题的人可以从修复中受益？

<div class="container">
    <div class='sections'>
            <div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card A</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
                    </div>
                </div>
      </div>
      <div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card Two</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    </div>
                </div>
            </div>
  </div>

<div class="container">
    <div class='sections row'>
            <div class="col-sm-3 mt-3 grid-products" data-type='skill' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card A</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content</p>
                    </div>
                </div>
      </div>
      <div class="col-sm-3 mt-3 grid-products" data-type='passion' data-personality='istj'>
                <div class="card">
                    <div class="card-block">
                        <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
                        <h5 class="card-title">Card Two</h5>
                        <h6 class- "card-personalityType">Subtitle</h6>
                        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                    </div>
                </div>
            </div>
  </div>