css - 从实现中仅获取页脚 css

Question

我有一个带有自己的css和bootstrap v4的网页，但是我想使用Materialise的页脚，但是我不想使用整个css代码以避免与bootstrap冲突，有没有办法只获得css的这一部分？

Answer 1

我不知道是否存在其他代码。你可以尝试 mdbootstrap 或类似的。但这是我制作的片段。

html

<!--Footer-->
<footer class="page-footer blue center-on-small-only">
  <!--Footer Links-->
  <div class="container-fluid">
    <div class="row">
      <!--First column-->
      <div class="col-md-3 offset-md-1">
        <h3 class="title">Footer Content</h3>
        <p>Here you can use rows and columns here to organize your footer content.</p>
      </div>
      <!--/.First column-->
      <hr class="hidden-md-up">
      <!--Second column-->
      <div class="col-md-2 offset-md-1">
        <h5 class="title">Links</h5>
        <ul>
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!--/.Second column-->
      <hr class="hidden-md-up">
      <!--Third column-->
      <div class="col-md-2">
        <h5 class="title">Links</h5>
        <ul>
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!--/.Third column-->
      <hr class="hidden-md-up">
      <!--Fourth column-->
      <div class="col-md-2">
        <h5 class="title">Links</h5>
        <ul>
          <li><a href="#!">Link 1</a></li>
          <li><a href="#!">Link 2</a></li>
          <li><a href="#!">Link 3</a></li>
          <li><a href="#!">Link 4</a></li>
        </ul>
      </div>
      <!--/.Fourth column-->
    </div>
  </div>
  <!--/.Footer Links-->
  <!--Copyright-->
  <div class="footer-copyright">
    <div class="container-fluid">
      © 2017 Copyright: <a href="https://stackoverflow.com/users/4004879/jayakrishnan">jayakrishnancn.co.nf </a>
    </div>
  </div>
  <!--/.Copyright-->
</footer>
<!--/.Footer-->

CSS

.blue {
  background: #ee6e73;
}

.page-footer {
  color: #fff;
}
.page-footer .title {
  line-height: 2em;
}
.page-footer .container-fluid {
  padding: 10px;
}
.page-footer li, .page-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-footer a {
  color: #fff;
  text-decoration: none;
}
.page-footer .footer-copyright {
  background: rgba(51, 51, 51, 0.08);
  padding: 10px 0px;
}