Question

我试图创建一个显示四个客户端的网格。它在大型视口中看起来很好，但是一旦我开始缩小窗口，事情就不会正常分解/崩溃，而是相互叠加。问题尤其在于右上角的第二个客户端框。它似乎被第4号盒子隐藏了，但我不明白为什么。

这是一个小提琴：

这里是没有CSS文件的同一个jsfiddle（同样糟糕）：

<?php include('header.php') ?>

  <body>
    <?php include('navigation.php') ?>

  <div class="container-fluid">
      <div class="row">
        <div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">
          <div class="row">
            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">

                <div class="left_box">
                  <div class="logo_wrapper">
                    <a href="http://www.test.com">
                      <img class="client-logo" src="img/logo.png" style="width:250px; height:auto; padding-top:15px;">
                    </a>
                  </div>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                    <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                </div>
            </div>

            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
              <div class="left_box">
                <div class="logo_wrapper">
                  <a href="http://www.other.com">
                  <img class="client-logo" src="img/logo.svg" style="width:200px; height:auto;">
                  </a>
                </div>
                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. </p>

                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad.</p>

                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="row hidden-sm-down" style="margin: 75px;">

      </div>

      <div class="row">
        <div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">


          <div class="row">
            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">

                <div class="left_box">
                  <div class="logo_wrapper">
                    <a href="https://www.thirdclient.de">
                    <img class="client-logo" src="img/thirdlogo.jpg" style="width:250px; height:auto; padding-top:-20px;">
                    </a>
                  </div>
                  <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                  <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                  <p> The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                    <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>

                </div>
            </div>

            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
              <div class="left_box">
                <div class="logo_wrapper">
                  <a href="http://www.fourthclient.com/">
                  <img class="client-logo" src="img/fourthlogo.jpg" style="width:200px; height:auto;">
                  </a>
                </div>
                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>

                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>

                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>
              </div>
            </div>
          </div>

        </div>
      </div>
  </div>

<?php include('footer.php') ?>

Answer 1

问题是你在div.col-sm-10设置高度属性删除它，它应该解决问题。

希望这会有所帮助..

Bootstrap Grid以错误的方式折叠：元素位于其他元素之上

1 个答案: