Question

类function mapStateToProps(state) { const model = Selectors.Quotes.getCurrentQuote(state); return { model, checkedEnergyConcessionHolder: model.EnergyConcessionHolder, }; }无法正常工作，当屏幕尺寸低于575px时，显示卡的外观很奇怪。如何解决？

点击“运行代码段”->“整页”，然后将屏幕尺寸调整为575px以下：

.col-6

.divCard{
  float:left;
}

Answer 1

将class col-lg-8的内容包装在row类中。

由于col-*-*具有默认的页边距，这导致了问题。

请尝试以下代码。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row mx-md-2">
    <div class="card-group col-lg-8">
      <div class="row">
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>

        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
          <article class="card">
            <a href="#">
              <img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
            </a>
          </article>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-4" style="background-color: red; height:200px"></div>
  </div>
</div>

Answer 2

我注意到一些错误，这是解决方法。我将提供简化版本以显示问题所在。

根据引导程序，您需要在布局中采用以下方案。 container→row→col→row→col，依此类推。

您的布局有container→row→col→col，我想这就是问题所在。

此外，添加边框非常有帮助，这样您可以轻松查看布局及其行为。

我希望这可以解决您的问题。

<div class="container-fluid">
  <div class="row">
    <div class="card-group col-lg-8">
      <div class="row">
      
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">1</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">2</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">3</article>
        </div>

      </div>
    </div>
  </div>
</div>

Bootstrap 4-类.col无法正常工作

2 个答案: