时间戳

首页 > 解决方案 > 如何在 Bootstrap 中实现以下布局？

bootstrap-4 - 如何在 Bootstrap 中实现以下布局？

问题描述

布局

任何人都可以帮助我使用 Bootstrap 类实现这种布局吗？

标签： bootstrap-4

解决方案

干得好...

您只需要更改 CSS 即可获得所需的结果（更改颜色、字体、宽度、高度等），但结构已设置。如果需要，您还可以更改 Bootstrap 类前缀（当前设置为col-sm-）。

.row {
  width: 25vw;
  height: 18vh;
}

#price {
  color: #000099;
  font-size: 3vw;
  font-weight: 700;
}

#days {
  color: white;
  font-size: 2.2vw;
  background-color: #000099;
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>

<body>

  <div>
    <div class='row'>
      <div class='col-sm-9 d-flex justify-content-center align-items-center' id='price'>$16,000</div>
      <div class='col-sm-3 d-flex justify-content-center align-items-center text-center' id='days'>63<br> Days</div>
    </div>
  </div>

</body>

</html>

推荐阅读