Bootstrap;正确格式化 row/section 背景

Question

我正在尝试获取我的块部分的背景来封装图像，或者响应放入其中的内容。老实说，我什至不知道我想问什么，我只是想让白色 space 响应图像大小，这样我就可以在设置的块部分后面有一个背景 color/image关于我。我试过弄乱 padding/margin 但我似乎无法正确完成它。以防图像无法加载，我的 .html 和 .css 代码如下

Code

Product

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: lightskyblue;
}

hr {
  border: 0;
  clear: both;
  display: block;
  width: 100%;
  background-color: #212529;
  height: 1px;
}

.block {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
}

.photo {
  float: left;
  height: 320px;
  width: 320px;
  margin: 0 20px 10px 0;
}

html {
  position: relative;
  min-height: 100%;
}

main {
  margin: 80px 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <!-- jQuery CDN -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Bootstrap CDN -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <title>Jake's Portfolio</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <a class="navbar-brand" href="index.html" id="logo">
        <h1>Jacob Beeson</h1>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">About Me</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="resume.html">Resume</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <main class="container">
    <section class="row">
      <div class="col-md-12">
        <article class="block">
          <h1 class="block-header">About Me</h1>
          <hr />
          <img src="Headshot.jpg" class="photo">
          <p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
        </article>
      </div>
    </section>
  </main>
</body>

<footer>

</footer>

</html>

Answer 1

在 <p>I am a ...</p>

之后你需要 <div style="clear:both"></div>

您的 article 块应该如下所示：

        <article class="block">
          <h1 class="block-header">About Me</h1>
          <hr />
          <img src="Headshot.jpg" class="photo">
          <p>I am a student at Chapel Hill Coding Bootcamp. I am also a Registered Care Specialist at Thompson Child and Family Focus. I aspire to be a Full-Stack Developer by the end of this Program!</p>
          <div style="clear:both"></div>
        </article>

另见 fiddle：https://jsfiddle.net/j8Lacshf/

Bootstrap;正确格式化 row/section 背景

Bootstrap; formatting a row/section background properly

html

css

portfolio