1

我正在尝试根据引导程序中的视口是 lg 还是 md 来设置填充，我的代码是：

    @media (min-width: $screen-lg-min) {
        #logo-text {
          padding-top: 1.3em; 

        } 
      }

      @media (max-width: $screen-md-max) {
        #logo-text {
          padding-top: 1em;
        }
      }

似乎当我运行它时它说未定义的变量：“$screen-lg-min”。有人知道这里发生了什么吗？我检查了引导文件，在 _variables.scss 中有一个具有该名称的变量。

这段代码是用 application.css.sass 样式表编写的，因为我使用 gem bootstrap-sass

    @import 'bootstrap';
    @import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption);
    @import url(http://fonts.googleapis.com/css?family=Prosto+One);

    body {
      background-color: black;

      .content-wrapper
      {
        position: absolute;
        width: 70%;
        margin: 0 auto;
        height: 50em;
        background-color: white;
        margin-top: 6%;
      }
    }

我正在尝试在兄弟 header.css.sass 文件中设置视口，我的代码是

header {

  img {

    margin: 5px 0 0 5px;    
  }

  @media (min-width: $screen-lg-min) {
    #logo-text {
      padding-top: 1.3em; 

    } 
  }

  @media (max-width: $screen-md-max) {
    #logo-text {
      padding-top: 1em;
    }
  }

  #logo-text {
    font-size: 3.5em;
    color: #403A2C;
    font-family: 'PT Sans Caption', sans-serif;
  }

  nav ul {

    text-decoration: none;
    list-style-type: none;

    li {      

      font-size: 1.5em;    
      float: right;      
      display: inline-block;
      margin: 16% 1em 0 0;
      padding: .5em .5em;           

      a {

        font-family: 'Prosto One';
        font-weight: bold;
        color: #403A2C;
      } 

      a:hover {

        color: #777D95;   
        text-decoration: none;     
      }
    }
  }
}
4

0 回答 0