为什么我的第四个网格元素显示不好？答案

【问题标题】：Why doesn't my fourth grid element display well?为什么我的第四个网格元素显示不好？
【发布时间】：2022-01-11 22:07:37
【问题描述】：

我正在使用一个使用 bootstrap 3.4.1 的 WordPress 主题。

我有一个网格问题，第四个元素显示在假设的第六个元素的位置。这是从我的代码中提取的 sn-p，但我无法让它看起来像在我的网站上。 https://codepen.io/pierrick-pi-gallagher/pen/poWyvpY

在这里你可以看到我在说什么。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="adforest_res">
  <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="row">
        <div class="posts-masonry">
          <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-806">
            <div class="white category-grid-box-1">
              <div class="image">
                <div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
                <div class="ribbon status_active" id="status-dyn-806">Actif</div>
                <a href="https://www.hoppyconnect.com/ad/blonde-de-soif-bec-permanent-6-mois/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/12/logo-konrad-carre-80x80.png" alt="Blonde de soif – bec permanent – 6 mois" style="width: 40%;left: 30%;margin-top: 18% !important;margin-bottom: 17%;" class="img-responsive"></a>
              </div>
              <a href="https://www.hoppyconnect.com/ad/blonde-de-soif-bec-permanent-6-mois/">
                <div class="short-description-1 text-center">
                  <div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
                  <h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Blonde</h2>
                  <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
                      Non renseigné
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
                      6 mois min</div>
                  </div>

                  <span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">2,40 €/L HTDI</span>
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-757">
            <div class="white category-grid-box-1">
              <div class="image">
                <div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
                <div class="ribbon status_active" id="status-dyn-757">Actif</div><a href="https://www.hoppyconnect.com/ad/d-check-offre-contrat-permanent-1-biere/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/12/logo-konrad-carre-80x80.png" alt="D-CHECK – Offre > Contrat permanent > 1 bière" style="width: 40%;left: 30%;margin-top: 18% !important;margin-bottom: 17%;" class="img-responsive"></a></div>
              <a href="https://www.hoppyconnect.com/ad/d-check-offre-contrat-permanent-1-biere/">
                <div class="short-description-1 text-center">
                  <div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
                  <h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Double IPA</h2>
                  <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
                      Non renseigné
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
                      12 mois min</div>
                  </div>

                  <span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">2,30 €/L HTDI</span>
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-710">
            <div class="white category-grid-box-1">
              <div class="image">
                <div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
                <div class="ribbon status_active" id="status-dyn-710">Actif</div>
                <a href="https://www.hoppyconnect.com/ad/test-bec-permanent-1-biere/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/11/shutterstock_402621667-1-2-313x234.jpg" alt="(Test) bec permanent 1 bière" class="img-responsive"></a>
              </div>
              <a href="https://www.hoppyconnect.com/ad/test-bec-permanent-1-biere/">
                <div class="short-description-1 text-center">
                  <div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
                  <h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Ambrée</h2>
                  <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
                      Non renseigné
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
                      12 mois min</div>
                  </div>

                  <span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">1,11 €/L HTDI</span>
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12" id="holder-707">
            <div class="white category-grid-box-1">
              <div class="image">
                <div style="position: absolute; top: 38px; left: 0px;background-color: black;color: white;z-index: 1000;padding: 5px;">Recherche</div>
                <div class="ribbon status_active" id="status-dyn-707">Actif</div>
                <a href="https://www.hoppyconnect.com/ad/bec-blonde-6-mois-dengagement-mini/"><img src="https://www.hoppyconnect.com/wp-content/uploads/2021/11/shutterstock_402621667-1-1-313x234.jpg" alt="Bec blonde – 6 mois d’engagement mini" class="img-responsive"></a>
              </div>

              <a href="https://www.hoppyconnect.com/ad/bec-blonde-6-mois-dengagement-mini/">
                <div class="short-description-1 text-center">
                  <div class="category-title" style="font-size: 14px !important;font-weight:300;color: black !important">Contrats permanents</div>
                  <h2 class="text-center" style="font-size: 14px !important;font-weight:300;color: black !important">Barley wine</h2>
                  <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left" style="font-size: 14px !important;font-weight:300;color: black !important">
                      Non renseigné
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="font-size: 14px !important;font-weight:300;color: black !important">
                      12 mois min</div>
                  </div>

                  <span class="ad-price" style="text-align: center !important;float:none;font-size: 14px !important;font-weight:300;color: black !important">12,00 €/L HTDI</span>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-md-12 col-xs-12 col-sm-12"></div>
      </div>
    </div>
  </div>

我不明白，因为它在我网站的另一个页面上使用相同的代码完美运行。

我无法在我的网站上提供链接，因为它处于即将推出模式。

由于我从未使用过 bootstrap 3.4，因此非常感谢任何帮助。

谢谢。

【问题讨论】：

您好，感谢您的反馈，我添加了一个指向 codepen 的链接，因为堆栈溢出不需要超过 30000 个字符。但即使添加了modern.css，我也无法让它看起来像在我的网站上，但同样的问题存在并且可以查看。
如果是这样，主要问题是您采用了一个布局库并在列上使用绝对定位对其进行了扭曲。不要那样做。不要乱用网格。使用自定义类和嵌入的样式标签或外部样式表，将所有样式去掉，并将它们放在网格 contents 上。不要使用内联样式。一开始就避免绝对定位，除非你知道你真的需要它。
在你的 sn-p 中，是 bootstrap 3.3.7。我说我使用的是引导程序 3.4.1。此外，内联样式会自动添加到我网站的 html 中。我的代码中绝对没有绝对的内联 CSS 定位。正如你所说，我只是从控制台复制/粘贴了 html。此外，您的 sn-p 中的结果看起来不像我帖子中的图像。我提供的 codepen 链接更具相关性。
由于样式也被添加到正在运行的页面中，我认为这不是我想要解决的问题？
@isherwood 现在可以正常工作了：codepen.io/pierrick-pi-gallagher/pen/poWyvpY

标签： wordpress twitter-bootstrap twitter-bootstrap-3 css-grid bootstrap-3.4.1

【解决方案1】：

很抱歉告诉你什么，但是你使用的主题写得很糟糕，有超过 14k 行的 CSS 有多个错别字，比如第 4970 行 position: realtive;。

没有使用CSS grid，但有192次使用position: absolute;和273次使用!important。

在 HTML 部分中，有一个应用在 div 上的类，这些类不在 CSS 中，例如 posts-masonry。

在您的 "grid" 上的每个项目中，都有这种样式直接应用于 HTML：

position: absolute;
left: Xpx;
top: Xpx;

看起来这些值已经被 javascript 应用了。

总而言之，我们将无法帮助解决此网格问题，因为最好的方法是完全重新编写网格系统。

【讨论】：