Bootstrap中media对象不起效果

最新推荐文章于 2022-10-03 22:14:18 发布

雨中奔跑的小孩

最新推荐文章于 2022-10-03 22:14:18 发布

阅读量151

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_47617631/article/details/117048382

版权

图片占一行，标题文字在下面,没有官网效果

正确代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒体对象</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
</head>
<body>
    <div class="container">
         <!-- 创建媒体对象 -->
         <div class="media">
             <div class="media-left">
                <a href="#">
                    <img src="cp2.jpg" alt="">
                </a>
             </div>
            <div class="media-body">
                <h4 class="media-heading">欢迎来到极客</h4>
                <p>
                    欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客
                    欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客
                    欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客欢迎来到极客
                </p>
            </div> 
        </div> 
    </div>
</body>
</html>

在这里插入图片描述

错误一：不能引入css文件4以上版本，引入3版本

错误二：media-left必须放置在div中,我是放在了a标签中，不生效

雨中奔跑的小孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap中media对象不起效果

Bootstrap中media对象不起效果图片占一行，标题文字在下面,没有官网效果正确代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>媒体对象</title>
复制链接

扫一扫