bootstrap sm 调整大小不刹车答案

【问题标题】：bootstrap sm resize not brakeingbootstrap sm 调整大小不刹车
【发布时间】：2020-10-09 17:34:46
【问题描述】：

这是我的 HTML 代码。（bootstrap css 包含在 head 中）

根据 Bootstrap，每个 col div 都应该在小屏幕 12 上占用，这基本上是全屏。它还应该用 .d-sm-none .d-md-block 隐藏 img 但是当我在 chrome 工具中调整大小时，它并不顺利。到目前为止，谷歌无法帮助我。还尝试删除 flex 类，但改变了一些东西

<body cz-shortcut-listen="true">

    <div class="container-fluid">
        <div class="row d-flex flex-wrap">



    <div class="col-sm-12 col-md-6 col-lg-3 ">

      <div class="card" style="width: 18rem;">
      <img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Tower">
      <div class="card-body">
        <h5 class="card-title">Tower</h5>
        <p class="card-text">City: dubay Zip-Code 4993
        <br>
        </p><p>Created: 1.2.2015, 05:40:00
        </p>
            </div>
            </div>
    </div>



    <div class="col-sm-12 col-md-6 col-lg-3 ">

      <div class="card" style="width: 18rem;">
      <img class="card-img-top d-sm-none d-md-block" src="img/1.jpg" alt="Palme">
      <div class="card-body">
        <h5 class="card-title">Palme</h5>
        <p class="card-text">City: Dubai Zip-Code 333
        <br>
        </p><p>Created: 1.2.2011, 05:40:00
        </p>
            </div>
            </div>
    </div>


      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/2.jpg" alt="Mcdonald">
      <div class="card-body">
        <h5 class="card-title">Mcdonald fastfood</h5>
        <p class="card-text">City: melbourn Zip-Code 4544
        <br>
        </p><p>
        <label>Phone, Web</label>
        <br>
        +66 4895643312 
        <br>
        www.getfat.com
        </p><p>Created: 2.3.2020, 04:30:00
         </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/2.jpg" alt="Burgerkin">
      <div class="card-body">
        <h5 class="card-title">Burgerkin fastfood</h5>
        <p class="card-text">City: Switzerlan Zip-Code 4334
        <br>
        </p><p>
        <label>Phone, Web</label>
        <br>
        +66 443543512 
        <br>
        www.getfatter.com
        </p><p>Created: 2.3.2011, 04:30:00
         </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/3.jpg" alt="Eating Burger">
      <div class="card-body">
        <h5 class="card-title">Eating Burger</h5>
        <p class="card-text">City: burgertown Zip-Code 4234
        <br>
        <label> Event Infos </label>
        </p><ul>
        <li>14. June. 2100</li>
        <li>3 o clock</li>
        <li>56</li>
        <li>www.event.com</li>
        </ul>
        <p>Created: 1.2.2019, 03:25:00
        </p>
            </div></div>
    </div>

      <div class="col-sm-12 col-md-6 col-lg-3">
      <div class="card" style="width: 18rem;">
      <img class="card-img-top" src="img/3.jpg" alt="Sky diving">
      <div class="card-body">
        <h5 class="card-title">Sky diving</h5>
        <p class="card-text">City: skytown Zip-Code 4666
        <br>
        <label> Event Infos </label>
        </p><ul>
        <li>14. June. 2000</li>
        <li>5 o clock</li>
        <li>560</li>
        <li>www.eve222nt.com</li>
        </ul>
        <p>Created: 1.2.2011, 03:25:00
        </p>
            </div></div>
    </div>
      </div>
    </div>



    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

d-sm-none 工作正常。您在 img 标记上有它，因此在此处的引导文档中引用的断点中，您可以看到 sm 断点实际上是针对横向手机的，因此只会将 img 从 576px 隐藏到 768px。如果您尝试将其定位在手机上的常规垂直方向上，则可以将 d-sm-none d-md-block 替换为 .d-none .d-sm-block 像这样：

    <div class="row">  
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 ">
            <div class="card">
                <img class="card-img-top d-none d-sm-block" src="img/1.jpg" alt="Palme">
                <div class="card-body">
                    <h5 class="card-title">Palme</h5>
                    <p class="card-text">
                        City: Dubai Zip-Code 333
                        <br>
                    </p>
                    <p>HIDE ME</p>
                    <p>
                        Created: 1.2.2011, 05:40:00
                    </p>
                </div>
            </div>
        </div>
    </div>

当我将其设置为 576px 时，您可以在开发工具中看到这一点，并且您会看到 img 在 PALME 部分中可见，并说 HIDE ME 是我添加的以标记您拥有要隐藏的 img 的卡片。@987654322 @

然后在这里，当我们转到 575px 时，您可以看到它像预期的那样消失：

就您的列 div 问题而言，我不确定我是否理解您的要求，但我确实看到您的代码有什么问题。在引导程序中，您必须拥有您所做的 container 类，然后在里面有一个 row（每行有 12 列）。填满一行后，您必须创建另一行以将您的内容再次放入其中，最多可容纳 12 列。您目前如何拥有代码是容器内的 1 行，然后是您的卡片上都有第 12 列。下面是我假设您尝试做的演示，即让卡片从小屏幕跨越整个屏幕，直到您希望它们占据屏幕的一半，我从您那里看到 col-md-6 . 我通过删除 flex 类以及删除您设置为 18rem 的卡片宽度来进行演示。它现在跨越了整个屏幕，因为我还在 col-xs-12 中添加了在垂直方向手机上全屏，因为你的卡片上最低的是 col-sm-12，正如我上面所说，它只是横向的宽度用于手机。

演示：https://jsfiddle.net/atcvmqLx/

说明：您会在那里看到，即使没有附加图像，卡片本身也会扩展为全屏，直到遇到 col-md-6 断点 @ 768px。

如果您有任何问题，请告诉我！

【讨论】：