时间戳

首页 > 解决方案 > HTML CSS：侧页组件

html - HTML CSS：侧页组件

问题描述

什么是正确的 Web 组合名称？是卡片吗，字幕？CSS Bootrap 是否有一个组件？我们的客户想要构建一个如下设计的 Web 组件。带有标题描述的图像。

在此处输入图像描述

标签： htmlcsstwitter-bootstrap

解决方案

Bootstrap 中没有特定的 CSS 组件可以与您的图像匹配，但您可以使用 Bootstrap 中的一些 CSS 样式。你可以试试这个并根据你的要求更改标题侧的 CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  
</head>
<body>

<div class="container-fluid">

  <div class="row" style="height: 100px;" >
    <div class="col-md-2" style="background-color:lavender;">
    <img src="img.png" class="align-self-center mr-3"style="position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
    <div class="col-md-2" style="background-color: #b3b2b2;text-align: center;">
    <p style="position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);">title<p/></div>
    

</div>
</div>
</body>
</html>

推荐阅读