html - 使文本和图像并排显示并根据设备更改大小
问题描述
我正在尝试创建自己的个人网站。我想做两件事:
使图片出现在页面的左侧,并在右侧显示一些文本。
根据设备调整图像和文本的大小。
这是我正在使用(使用)的代码:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">
<div class="indexbox">
<div class="col-xs-5 col-sm-6 col-lg-4 col-md-4">
<img class="img-responsive img-border img-left" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Bugs_Bunny.svg/300px-Bugs_Bunny.svg.png" height="190" width="142" alt="">
</img>
</div>
<div class="col-xs-7 col-sm-6 col-lg-8 col-md-8">
<p class="visible-xs">
<p> Hi I'm XXXXXXX, a PhD Candidate in XXXX at XXXXX, XXXXXXXXXXX. <br /> <br />
Before joining the YYYYYYYY PhD program at YYYYYYYY, I received a BA in YYYYYYYY from YYYYYYYY, YYYYYYYY and a MS in YYYYYYYY Economics from YYYYYYYY, YYYYYYYY. My research broadly focuses on YYYYYYYY.
</p>
</p>
</div>
</div>
</div>
不幸的是,我似乎无法得到想要的结果。我认为这里的两个代码:col-xs-7 col-sm-6 col-lg-8 col-md-8
并且img-responsive img-border img-left
应该能够达到结果,但它似乎并不总是有效。有人可以在这里帮助我吗?
PS我在这里测试代码:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
解决方案
试试这个
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="col-4">
<img class="img-responsive img-thumbnail" src="https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Bugs_Bunny.svg/300px-Bugs_Bunny.svg.png" height="190" width="142" alt="">
</div>
<div class="col-8">
<p class="visible-xs">
<p> Hi I'm XXXXXXX, a PhD Candidate in XXXX at XXXXX, XXXXXXXXXXX. <br />
<br /> Before joining the YYYYYYYY PhD program at YYYYYYYY, I received a BA in YYYYYYYY from YYYYYYYY, YYYYYYYY and a MS in YYYYYYYY Economics from YYYYYYYY, YYYYYYYY. My research broadly focuses on YYYYYYYY.
</p>
</p>
</div>
</div>
推荐阅读
- django - 如何在 Django 模板中设置 var
- websphere-8 - Spring Boot 2.1.3 WAR ON Websphere 8.5 时的部署问题
- python - 提供的绑定数量不正确。当前语句使用 1,并且提供了 5
- sql - SQL在另一个表中不存在,但在另一个表中count大于3
- python - 有没有办法让我的 python discord bot 在某个时间做某事
- python - 我如何找到模型将输入分类为 [0,1] 的概率
- https - CFDocument isn't showing styles and images. Is HTTPS the problem?
- javascript - 在Javascript中按作者对对话数组进行排序
- python - 提高逻辑迭代 Python 的速度
- php - 至少包含一个的正则表达式