css - 如何在 Material 中创建响应式页脚？

Question

我正在尝试开发 Angular 为 6 的页脚。我使用的是 Angular Material 而不是 Bootstrap 。

任何人都可以帮助将此代码更改为 Angular Material 语法吗？

我想将这个页脚转换成完全响应式的 Material UI 设计。

如果可能的话，我可以让这个页脚也具有响应性吗？

            .app-footer {
          margin-top: 2em;
          text-align: center;
          vertical-align:middle;
          min-height: 100%
        }
        
        .app-footer-link { 
          line-height: 1.5em;
        }
        
        .app-footer-link p {
            margin: 0;
        }
    
        .row/*:after*/ {
      display: flex;
      /*content: "";
      display: table;
      clear: both;*/
    }
    
    .firstrow/*:after*/ {
      display: flex;
      /*content: "";
      display: table;
      clear: both;*/
      padding-top: 20px;
    }
    
    .column {
      flex: 25%;
      /*width:20%;*/
      float:left;
      font-size:12px;
    }
    .headingcolumn {
      flex: 25%;
      /*width:20%;*/
      float:left;
      font-size:18px;
      /*line-height:12px;*/
    }
    .maincolumnleft {
      flex: 50%;
      /*width: 50%;*/
      float: left;
    }
    .maincolumnright {
      /*flex: 50%;*/
      width: 50%;
      float: right;
    }
    .fullcolumn {
      width: 100%;
      /*flex:100%;*/
      font-size: 12px;
      text-align: center;
      vertical-align: middle;
    }
    
    .heading{
      font-size:18px;
    }

        @media screen and (max-width: 600px) {
      .column {
        /*flex:100%;*/
        width: 100%;
      }
      .headingcolumn {
        /*flex: 100%;*/
        width: 100%;
      }
      .maincolumnleft {
        /*flex: 100%;*/
        width: 100%;
      }
      .maincolumnright {
        /*flex: 100%;*/
        width: 100%;
      }
    }

 

     ------------footer.component.html---------------------------
        <footer class="app-footer">
      <div class="app-footer-link">
        <div class="firstrow">
          <div class="headingcolumn"></div>
          <div class="headingcolumn">B</div>
          <div class="headingcolumn">S</div>
          <div class="headingcolumn">About Us</div>
          <div class="headingcolumn">C Service</div>
        </div>
        <div class="row">
          <div class="column"></div>
          <div class="column">New Acc</div>
          <div class="column">New Acc</div>
          <div class="column">About</div>
          <div class="column">Help</div>
        </div>
        <div class="row">
          <div class="column"></div>
          <div class="column">Cat</div>
          <div class="column">St</div>
          <div class="column">Sit</div>
          <div class="column">Contact Us</div>
        </div>
        <div class="row">
          <div class="fullcolumn">
            <span class="heading">Follow:</span>
          </div>
        </div>
        <div class="row">
          <div class="fullcolumn">
            Copyright &copy; {{getYear()}} 
          </div>
        </div>
      </div>
      </footer>

Answer 1

已更新

    footer{
      background: tomato;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap; /*flex items will wrap onto multiple lines, from top to bottom.*/
      padding: 20px;
    }
    .section-top{
     background: yellow;
     display: flex; 
     justify-content: center; /*items are centered along the line*/
     padding: 20px 0;
     }
    .section-bottom{
      background: blue;
      text-align: center;
      padding: 15px 0;
    }
    .col{
      margin: 0 15px;
      width: 25% /*optional*/
    }
    @media all and (max-width: 600px){ /*style if screen size is <600px*/
    .section-top{
        flex-direction: column;
    }    
    .col{
      text-align: center;
      width: 100%;
      margin: 0
    }
}

    <footer>
    <section class="section-top">
      <div class="col">
        <h3>Title</h3>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
        <div>Lorem ipsum dolor sit amet.</div>
        <div>Line 3</div>
      </div>
      <div class="col">
        <h3>Title</h3>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</div>
        <div>Lorem ipsum dolor sit amet.</div>
        <div>Line 3</div>
      </div>
      <div class="col">
        <h3>Title</h3>
        <div>Line 2</div>
        <div>Line 3</div>
      </div>
      <div class="col">
        <h3>Title</h3>
        <div>Line 2</div>
      </div>
    </section>
    <section class="section-bottom">
      <div>Follow</div>
      <div>Copy right</div>
    </section>
    </footer>