如何覆盖填充：0；来自萨斯？

Question

我现在正在处理我网站的页脚，我正在努力使其具有响应性。每当屏幕尺寸变得小于 992 像素时，我都会进行媒体查询，因此页脚的内容会在页脚内居中。在调整大小之前，我有一列我放了 padding: 0;在。

我的问题是我需要去掉那个填充物才能使我的内容居中，但我需要它用于正常大小的页脚。如何覆盖填充：0；这样我就可以将我的内容居中？

普通页脚代码：

.social-media {
    margin-bottom: 50px;

    > ul {
      padding: 0;
      list-style: none;

      > li {
        > a {
        padding-right: 20px;
        float: left;
        color: #ffffff;
        }
      }
  }
}

小页脚代码：

@media screen and (max-width: 992px) {
  .social-media {
    margin-bottom: 0;
    height: auto;
    width: auto;

        > ul {
      list-style: none;
      text-align:center;

      > li {
                padding-left: 10px;
                padding-right: 10px;

                > a {}
            }
      }

  }
}

我的引导列的代码：

<div class="col-lg-3 offset-lg-6 social">
  <div class="social-media">
    <ul class="nav-items">
      <li class="nav-item" :key="index" v-editable="item" v-for="(item, index) in $store.state.settings.footer_nav">
        <LinkType class="nav-link" :link="item.link" :linkText="item.name">{{ item.name }}</LinkType>
      </li>
    </ul>
  </div>
</div>

我希望有人可以帮助我解决这个问题。我已经坚持了一段时间了。

Answer 1

您可以使用 '!important' 来强制 css 属性。

.social-media
{
margin-bottom: 50px;

> ul
{
  padding: 10px !important;
  list-style: none;

  > li
  {

    > a
    {
    padding-right: 20px;
    float: left;

    color: #ffffff;
     }
   }
    }
 }

@media screen and (max-width: 992px) {

               .social-media
                {

                    margin-bottom: 0;

                    height: auto;
                    width: auto;

                    > ul
                    {
                        list-style: none;

                        text-align:center;

                        > li
                        {
                            padding-left: 10px;
                            padding-right: 10px;

                            > a
                            {

                            }
                        }
                    }

 }