时间戳

首页 > 解决方案 > 如何在小屏幕中获得所需的 html 布局，这在大屏幕中是不同的

html - 如何在小屏幕中获得所需的 html 布局，这在大屏幕中是不同的

问题描述

我实现了标记代码并在大屏幕上获得了所需的布局，但是在将屏幕尺寸减小到手机级别时，我需要像 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>

期望的输出

描述布局的图像

标签： htmlcssbootstrap-4

解决方案

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

例如，col-12 col-md-8表示 8 列宽md和更大，12 列宽md和更小：

<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

推荐阅读