Question

我正在尝试创建此网页： https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/index.html

该部分的前两部分工作正常，显示图片旁边的图像。然而，该部分的第三部分没有显示任何内容。我的两个div的结束标记显示为白色而不是红色。

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="main">
      <div class="container">
        <h2>Heading</h2>
        <p>Paragraph Text</p>
        <a class="btn" href="#">Download Shutterbug</a>

      </div>
    </div>

   <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
        </div>   
        <div class="col-md-6">
          <h2>Heading</h2>
          <p>Paragraph</p>
        </div>
        </div>   

        <div class="row">
          <div class="col-md-6">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
           </div>
          <div class="col-md-6">
            <h2>Heading</h2>
            <p> Text Text Text Text Text </p>
          </div>  
        </div>

        <div class="row">
          <div class="col-md-6">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
          </div>
        <div class="col-md-6">
          <h2>Heading<h3>
            <p>Text Text Text</p>
            </div>
            </div>     
          </div>
      </div>
    </div>

Answer 1

你有不需要的结束div。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
      </div>
      <div class="col-md-6">
        <h2>Heading</h2>
        <p>Paragraph</p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
      </div>
      <div class="col-md-6">
        <h2>Heading</h2>
        <p>Text Text Text Text Text</p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
      </div>
      <div class="col-md-6">
        <h2>Heading<h3>
            <p>Text Text Text</p>
      <div>   
    </div>

带有Bootstrap的行和列

1 个答案: