时间戳

首页 > 解决方案 > bootstrap sm 调整大小不刹车

html - bootstrap sm 调整大小不刹车

问题描述

所以这是我的 HTML 代码。（引导 css 包含在 head 中）

根据 Bootstrap 的说法，小屏幕 12 上的每个 col div 都应该占用，这基本上是全屏。它还应该使用 .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>

标签： htmlcssbootstrap-4

解决方案

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 的卡片。在此处输入图像描述

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

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

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

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

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

推荐阅读