如何在与大屏幕不同的小屏幕中获得所需的 html 布局

Question

我实现了标记代码并在大屏幕上获得了所需的布局，但是在将屏幕尺寸减小到手机级别时，我需要像 image-3 这样的布局，而在像笔记本电脑这样的大屏幕上，它应该像 image-1。 Image-1,Image-3 指的是我已链接的单个图像。

我正在使用 Bootstrap-4、html-5

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <h6>Image-1 in large screens like laptop</h6>
  <div class="row">
    <div class="col-sm-8 ">

      <div class=" card">
        <button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card"><button class="bg-danger" style="padding: 10%; font-size: 15px">oneSmall</button></div>
      <div class="card"><button class="bg-danger" style="padding: 10%; font-size: 15px">oneSmall</button></div>
    </div>
  </div>
</div>

<!-- In order to fulfil desired layoutin small screens, i implemented this-->
<div class="container-fluid">
  <h6>Image-2 after i made changes to get layout like Image-3,but in large screen it looks</h6>
  <div class="row">
    <div class="col-sm-8 col-12 ">
      <div class=" card">
        <button class="bg-dark" style="padding: 15%; font-size: 15px">bigone</button>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="row">
        <div class="card col-6"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
        <div class="card col-6"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <h6>Image-3, like this i need to get in phone's screen, or smaller devices</h6>
  <div class="row">
    <div class="col-12">
      <div class=" card">
        <button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
      </div>
    </div>


    <div class="card col-6"><button class="bg-danger" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button></div>
    <div class="card col-6"><button class="bg-danger" style="padding-left: 50%; padding-bottom: 10%;font-size: 15px; width: 100%">oneSmall</button></div>


  </div>
</div>

描述布局的图片

Answer 1

使用响应式网格类在所需的断点处更改布局。

例如，col-12 col-md-8 表示 md 及以上为 8 列宽，md 及以下为 12 列宽：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-8">
      <div class=" card">
        <button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="row h-100">
        <div class="col-6 col-md-12">
          <div class="card h-100">
            <button class="bg-danger h-100" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button>
          </div>
        </div>
        <div class="col-6 col-md-12">
          <div class="card h-100">
            <button class="bg-danger h-100" style="padding-right: 50%; padding-bottom: 10%; font-size: 15px; width: 100%">oneSmall</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/eTGcVjgAWH

Answer 2

试试这个代码。希望能帮到你。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8 col-sm-12">
      <div class="card">
        <button class="bg-danger" style="padding: 15%; font-size: 15px">bigone</button>
      </div>
    </div>
    <div class="col-lg-4 col-sm-12">
      <div class="row">
        <div class="col-md-12 col-sm-6">
          <div class="card"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
        </div>
        <div class="col-md-12 col-sm-6">
          <div class="card"><button class="bg-dark" style="padding: 10%; font-size: 15px">oneSmall</button></div>
        </div>
      </div>
    </div>
  </div>
</div>