Question

我有三个不同的div应该一个接一个地显示，但它们只是在网页上直接相互跳跃。以下是所有这些代码：

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
  <center>
    <div class="container" style="margin-top:150px;">
      <div class="row">
        <div class="top-title">
          <h1>Introducing 10/40 Academy.</h1>
          <h3>An affordable entrepreneurship course that can double as high school credit.</h3>
          <img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
          <a href="#showVideo" data-toggle="tab" class="halfraised btn btn-primary hidden-xs">Watch Video&nbsp;&nbsp;<span class="glyphicon glyphicon-play-circle"></span></a>
          <h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
          <h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
        </div>
      </div>
    </div>
  </center>
</div>

<div class="begin-tour">
  <div class="container">
    <div class="row">
      <div class="col-md-6" style="margin-top:50px;">
        <h2>Interested in small business?</h2>
        <h2>We're here to help.</h2>
        <p>
          Paragraph
        </p>
      </div>
      <div class="col-md-6">
        <center>
          <img width="70%" src="/MacImageBase.png" />
        </center>
      </div>
    </div>
  </div>
</div>

<div class="qualif">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>Header here</h2>
        <h2>Header</h2>
        <p>
          some text
        </p>
      </div>
      <div class="col-md-6"></div>
    </div>
  </div>
</div>

＆＃13;

解释所发生情况的最佳方式是通过照片。

Answer 1

我已将3个div添加到bootstrap容器中，取出中心（它不再使用或HTML5支持），将每个div作为12列行（col-md-12类），以便它们显示出来像你想要的一个接一个地说：

<div class="container">
  <div class="row">
    <div class="top-section  col-md-12">
      <div class="container" style="margin-top:150px;">
        <div class="row">
          <div class="top-title">
            <h1>Introducing 10/40 Academy.</h1>
            <h3>An affordable entrepreneurship course that can double as high school credit.</h3>
            <img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
            <a href="#showVideo" data-toggle="tab" class="halfraised btn btn-primary hidden-xs">Watch Video&nbsp;&nbsp;<span class="glyphicon glyphicon-play-circle"></span></a>
            <h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
            <h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
          </div>
        </div>
      </div>
    </div>
    <div class="begin-tour col-md-12">
      <div class="container">
        <div class="row">
          <div class="col-md-6" style="margin-top:50px;">
            <h2>Interested in small business?</h2>
            <h2>We're here to help.</h2>
            <p>
              Paragraph
            </p>
          </div>
          <div class="col-md-6">
            <center>
              <img width="70%" src="/MacImageBase.png" />
            </center>
          </div>
        </div>
      </div>
    </div>
    <div class="qualif col-md-12">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <h2>Header here</h2>
            <h2>Header</h2>
            <p>some text</p>
          </div>
          <div class="col-md-6"></div>
        </div>
      </div>
    </div>
  </div>
</div>

以下是plunker，您可以看到它。

如果有帮助，请告诉我。直到现在我才看到你的形象，所以我希望它有所帮助。

Div是垂直重叠的（Bootstrap）

1 个答案: