Bootstrap 3 面板和浮动图像-解网

问：

当我旁边有浮动图像时，我无法使用 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>

代码笔

HTML CSS 推特引导-3

<!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>

这种方法使您可以更好地控制布局，并允许文本包围图像，同时保持面板分离。您可能需要根据特定的设计需求进一步调整样式。

Bootstrap 3 面板和浮动图像

Bootstrap 3 panel and floating image

评论

评论