当我旁边有浮动图像时，我无法使用 Bootstrap 3 面板构建响应式设计。文本可短可长。我希望面板适合图像留下的可用空间，而不是位于图像后面。
我该怎么做？
这是例子：
<body>
<div class="row">
<div class="col-md-12 padding-top-40">
<img src="https://images.pexels.com/photos/34299/herbs-flavoring-seasoning-cooking.jpg" class="float-img">
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</p>
<h2>Don't leave me hanging</h2>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</p>
<div class="panel panel-danger">
<div class="panel-body">
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<br>
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div class="panel-footer">
<a class="btn btn-danger btn-lg btn-block" href="#">
<i class="fas fa-user-circle"></i> Register
</a>
</div>
</div>
</div>
</div>
</body>
<style>
body {
width: 1100px;
}
.float-img {
float: right;
width: 500px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
width: 1100px;
}
.content-container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.float-img {
width: 500px;
margin-right: 20px;
}
.panel-container {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content-container">
<img src="https://images.pexels.com/photos/34299/herbs-flavoring-seasoning-cooking.jpg" class="float-img">
<div class="text-content">
<p>
<!-- Your first paragraph here -->
</p>
<h2>Don't leave me hanging</h2>
<p>
<!-- Your second paragraph here -->
</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel-container">
<div class="panel panel-danger">
<div class="panel-body">
<!-- Your panel content here -->
</div>
<div class="panel-footer">
<!-- Your panel footer content here -->
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
这种方法使您可以更好地控制布局，并允许文本围绕图像，同时保持面板独立。您可能需要根据您的具体设计需求进一步调整样式。