在响应式设计中使用网格系统的困难

Question

我正在使用gridview开发一个响应式页面。我有一个包含3列的行：

 <div class="row">        
    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 1</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>

    <div class="col-12" >
      <div class="row">
        <div class="col-3">
            <img src="..." alt="">
          </div>              
          <div class="col-9">
            <h3>Headline 2</h3>
            <p>"Lorem ipsum dolor sit amet, ... </p>
          </div>
      </div>
    </div>   

      <div class="col-12" >
        <div class="row">
          <div class="col-3">
              <img src="..." alt="">
            </div>              
            <div class="col-9">
              <h3>Headline 3</h3>
              <p>"Lorem ipsum dolor sit amet, ... </p>
            </div>
        </div>
      </div>
  </div>

每列包含一行，该行本身由两列组成:一列用于图像，另一列用于标题和文本。每行中的列数加起来为12。但是，标题和内容显示在图像的下方，而不是旁边。你能弄清楚这个问题吗？

Answer 1

您可以首先检查是否没有元素具有填充、边距或col-3或col-9中的硬编码宽度，这些元素会强制这两列中的任何一列比预期的宽度更宽。

如果是这样的话，将没有足够的空间来并排显示这两列，最终的结果是，在col-3下，col-9将下降。

如果这不能帮助您识别问题，作为一种快速测试，可以将col-9更改为col-6，然后看看会发生什么。如果仍然没有，joy，张贴到页面的链接，或开始使用html和css的代码，这说明了问题。

祝好运!

Answer 2

我意识到我错过了下面的CSS

.row::after {
  content: "";
  clear: both;
  display: block;
  }

这就是为什么row表现得很奇怪！