向HTML5添加引导网格系统

Question

<main>    
    <section id="slide-1" class="homeSlide">
      <div class="bcg">   
        <div class="hsContainer">
        <div class="hsContent" data-center="bottom: 200px; opacity: 1"
                data-top="bottom: 1200px; opacity: 0"
                data-anchor-target="#slide-1 h2">
          <h2>Item1</h2>

        </div>
        </div>
      </div>
    </section>

    <section id="slide-2" class="homeSlide">
        <div class="bcg">
            <div class="hsContainer">
                <div class="hsContent"
                    data-center="opacity: 1"
                    data-center-top="opacity: 0"
                    data--100-bottom="opacity: 0;"
                    data-anchor-target="#slide-2"
                >
                <h2>Item2</h2>
              </div>
              </div>
          </div>
    </section>

    <section id="slide-2" class="homeSlide">
        <div class="bcg">
            <div class="hsContainer">
                <div class="hsContent"
                    data-center="opacity: 1"
                    data-center-top="opacity: 0"
                    data--100-bottom="opacity: 0;"
                    data-anchor-target="#slide-2"
                >
                <h2>Item3</h2>
              </div>
              </div>
          </div>
    </section>
</main>

我在main标签下有三个部分。这是一个视差效果，每个部分占据了整个屏幕，width.How将在这里应用bootstrap's网格系统，并使它们响应。

Answer 1

如下所示:在main上添加container-full，在每个部分上添加row

<main class="container-full">    
<section id="slide-1" class="homeSlide row">

bootply演示here