Plunker： https://plnkr.co/edit/kC9SPK2e7iy5OYhKpwOO?p=preview
<html>
<head>
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="m-2 ml-4" style="color: whitesmoke;">
<div class="row text-justify">
<div class="container">
<div class="text-center row ml-2">
<h1>About me</h1>
</div>
<article class="row single-post no-gutters">
<div class="col">
<div class="image-wrapper float-right pr-3">
<img src="https://via.placeholder.com/1000" style="width:50%; margin-left: 25px; margin-right: -10px;" />
</div>
<div class="single-post-content-wrapper" style="text-align-last:right; padding-top: 5px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra nisi sed nisi tempor, non suscipit libero dictum. Vivamus gravida cursus malesuada. Pellentesque mi nulla, pharetra ut quam sed, lobortis rhoncus lectus. Cras vel augue mi. Aliquam
vulputate dictum ex, sollicitudin tincidunt purus venenatis sed. Donec bibendum ligula eu justo auctor, ac efficitur tortor sodales. Quisque sit amet facilisis neque, sit amet volutpat velit. Sed sagittis mattis enim, vel tincidunt dui gravida
tincidunt. Donec imperdiet sem vitae sagittis lobortis. Pellentesque semper gravida massa. Suspendisse congue ac orci ut dapibus.
</div>
</div>
</article>
</div>
</div>
</div>
</body>
</html>
在第 21 行，我正在加载一个图像，如果我将此图像设置为设置的像素距离，它会像它应该的那样换行。但是我需要使用百分比，以便图像不会在较小的屏幕上消失。我需要做什么才能让它像它应该响应一样工作？
编辑：我试图让这个在这个页面中运行的 plunker 中工作，我不知道如何做到这一点......
更新：我使用了视图宽度而不是 %，这似乎有效，但这确实将组件限制在页面而不是其父级......
试试下面的代码，我认为它对你有帮助。 并且您应该使用有效的引导类。
html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style type="text/css">
.hd-titile{color:#111;}
.pro-img{width:200px;height:200px;margin: 21px 0px;}
.pro-img img{width:100%;}
.dis-txt{color:#111;}
@media only screen and (max-width:767px) {
.pro-img {width:100%;height:auto;}
.hd-titile h1{font-size: 25px;margin: 15px 0px 0px;}
}
</style>
</head>
<body>
<div class="" style="color:whitesmoke;">
<div class="text-justify">
<div class="container">
<div class="hd-titile">
<h1>About me</h1>
</div>
<article class="single-post no-gutters">
<div class="col-md-12">
<div class="image-wrapper pro-img">
<img src="https://via.placeholder.com/1000">
</div>
<div class="single-post-content-wrapper dis-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pharetra nisi sed nisi tempor, non suscipit libero dictum. Vivamus gravida cursus malesuada. Pellentesque mi nulla, pharetra ut quam sed, lobortis rhoncus lectus. Cras vel augue mi. Aliquam
vulputate dictum ex, sollicitudin tincidunt purus venenatis sed. Donec bibendum ligula eu justo auctor, ac efficitur tortor sodales. Quisque sit amet facilisis neque, sit amet volutpat velit. Sed sagittis mattis enim, vel tincidunt dui gravida
tincidunt. Donec imperdiet sem vitae sagittis lobortis. Pellentesque semper gravida massa. Suspendisse congue ac orci ut dapibus.
</div>
</div>
</article>
</div>
</div>
</div>
</body>
</html>