Question

我现在正在网站的页脚上工作，我正在努力使其响应。只要屏幕尺寸变小，然后992px，我就会进行媒体查询，因此页脚的内容将居中放置在页脚内部。在调整大小之前，我有一列要填充的列：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
                            {

                            }
                        }
                    }

 }

如何覆盖填充：0；从无礼？

1 个答案: