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

Posted 2023-02-22

【中文标题】如何覆盖填充：0；来自萨斯？

【英文标题】：How to override padding: 0; from sass?

【发布时间】：2019-08-17 20:00:17

【问题描述】：

我现在正在处理我网站的页脚，我正在努力使其具有响应性。每当屏幕尺寸变得小于 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>

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

【参考方案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 填充。大页脚上的 0 填充导致小页脚中的内容也为 0 填充，这导致我无法将内容居中。所以我基本上想从小页脚中删除 0 填充。

@StefandeBoer 您不能“删除”该属性，它具有填充值，无论它是 0 还是更高的值。在媒体查询中，如果您不希望它为 0，则需要设置所需的填充值。

我想我必须找到另一种方法。谢谢您的帮助！我很感激！

@StefandeBoer 我建议只使用检查元素来查看填充设置的内容（当它以您不希望的方式工作时），然后在媒体查询中自己设置该值