【问题标题】:Bootstrap Responsive Grid SystemBootstrap 响应式网格系统
【发布时间】:2021-08-15 10:42:30
【问题描述】:

我正在制作一个包含一些文本的部分,但我需要该部分右半部分的文本,而左侧有该部分的背景图像,所以我为未使用的一半制作了 col-md-4,因为我不想将背景图片和col-md-8隐藏到文本中,如何在小屏幕上隐藏col-md-4部分并让col-md-8覆盖整个部分?我正在使用引导程序 5

代码:

<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="header-main row">
  <div class="col-md-4"></div>
  <div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
    <h1 class="first-font">MOBI TECH</h1>
    <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
    <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
  </div>
</div>

桌面上的输出:

手机上的输出:

【问题讨论】:

    标签: html css twitter-bootstrap bootstrap-grid


    【解决方案1】:

    要隐藏特定屏幕断点上的元素,请使用.d-sm-none .d-md-block

    <!-- Bootstrap 4.1.x/Twitter Library -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    
    <!-- Body -->
    <div class="header-main row">
      <div class="col-md-4 .d-sm-none .d-md-block"></div>
      <div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center">
        <h1 class="first-font">MOBI TECH</h1>
        <h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
        <a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
      </div>
    </div>

    这将保留您为 md 屏幕定义的布局并隐藏第一个 div 并使第二个 div 12 colssm 屏幕上变宽。

    【讨论】:

    • 感谢您的宝贵时间,但尚未隐藏
    • 既然你已经包含了你现在正在使用 Bootstrap 4 的信息,你必须使用 .d-sm-none .d-md-block 因为隐藏的类已经消失了。我已经编辑了答案