javascript - 用线条分割网页

Question

如何像这样划分我的网站页面(在移动设备上堆叠)？最好使用 bootstrap，但不一定。

这是我的 html 代码(这是我要划分的部分):

<section>
    <div class="kj">
        <h3>The event and rules</h3>
    </div>
    <div class="kjb">
        <!--DIVIDE THIS PART-->
    </div>
</section>

我的 CSS 代码:

 .kj {
 width: auto;
 margin: auto;
 text-align: center;
 padding-top: 10%;
 }
 h3 {
 font-size: 7.0vw;
 color: #BDADAC;
 }
.kjb {
width: 60%;
text-align: center;
margin-left: 20%;
max-height: 80%;
padding-top: 3%;
}

Answer 1

试试这个:

<section>
  <div class="row">
    <div class="kj col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <h1 class="text-center">The event and rules</h1>
      <h3 class="text-center">Event 1</h3>
      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-2"></div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-8">Lorem ipsum Nostrud et in commodo pariatur deserunt culpa voluptate irure deserunt nulla et incididunt fugiat sit ullamco nostrud minim sed non laborum. Lorem ipsum Ut amet fugiat dolor do aliqua et commodo dolore voluptate ad Duis labore consectetur Duis laborum pariatur consectetur Ut amet laborum irure reprehenderit nisi nostrud fugiat ad qui in aliquip ea.
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-2"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="kjb">
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
       <h3 class="text-center">Event 2</h3>
       <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-8">Lorem ipsum Dolor veniam culpa laborum nulla est consectetur anim tempor incididunt mollit aliqua sit cupidatat elit minim nostrud qui pariatur tempor amet non magna aliqua irure sed veniam consequat voluptate labore. Lorem ipsum Quis Ut minim consequat est sed elit veniam quis dolor est culpa quis amet cillum do enim do consequat id sint ea esse commodo ut qui reprehenderit esse veniam ullamco ex commodo velit magna voluptate.
        </div>
        <div class="col-xs-2"></div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <h3 class="text-center">Event 3</h3>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div>
      <div class="col-lg-10 col-md-10 col-sm-10 col-xs-8">Lorem ipsum Aliquip deserunt magna fugiat ullamco do mollit tempor sunt dolor amet et irure incididunt ad adipisicing sunt aliquip tempor eiusmod adipisicing in irure magna ex reprehenderit aliqua culpa ea irure labore voluptate. Lorem ipsum Esse velit do tempor ea id sint culpa amet ad veniam sit irure cillum laborum dolore esse ut quis consectetur ex quis nostrud.</div>
      <div class="col-xs-2"></div>
    </div>
  </div>
</div>
</section>

Jsfiddle: 如果你想获得边框，请添加你自己的类