【问题标题】: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。

    如果您有任何问题,请告诉我!

    【讨论】:

      猜你喜欢
      • 2017-03-14
      • 2017-01-09
      • 1970-01-01
      • 2018-07-03
      • 1970-01-01
      • 1970-01-01
      • 2014-09-08
      • 1970-01-01
      • 2018-01-03
      相关资源
      最近更新 更多