html - 在引导程序 4 上制作网格

Question

看下面的附加图像。

我正在尝试使用boostrap4. 在 destop 中，第一列需要是 col-5 宽度，其他 3 相等。在移动 1st col 是 col-12 和其他 3 相等。

我的 HTML：

<div class="row">
  <article class="col-5">
    <h1 class="text-uppercase">Some Contents</h1>                
  </article>  

  <article class="col">
    <span class="counter">10</span>
  </article>  
  
  <article class="col">
    <span class="counter">10</span>
  </article> 

  <article class="col">
    <span class="counter">10</span>
  </article>  
</div>

此标记正在 destop 上工作。但不是在手机中。希望有人可以帮助我。

标签： htmlcssbootstrap-4

Answer 1

需要为小型设备添加断点

.text-uppercase{
        background:#f0f0f0
      }
      .counter{
        background:#f0f0f0;
        font-size:68px
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <div class="row">
      <article class="col-md-5 col-sm-12">
        <h1 class="text-uppercase">Some Contents</h1>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>
    </div>