Question

Materialise css version：v0.100.2

布局行为要求：

低于992px屏幕宽度时隐藏的响应式侧面菜单
隐藏侧边菜单时，左上方会显示菜单图标
顶部导航栏都已修复
当屏幕宽度> = 992px时，品牌标识类将以导航栏为中心
当屏幕宽度< 992px，品牌标识类将保持对齐

结果：我按照我的要求让它工作

问题：

当屏幕宽度< 992px，品牌徽标类将保持对齐但未刷新的内容就像屏幕宽度＆gt; = 992px时菜单图标的方式

注意：

这是我第一次使用codepen和stack snippets。如果我没有正确使用它们，请纠正我。我按照https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/和https://meta.stackoverflow.com/a/343424/80353

中的示例进行操作

在这里查看我的codepen

Codepen

请参阅我的stackoverflow片段

＆＃13;

jQuery(function($) {
  $(".button-collapse").sideNav();
});

＆＃13;

/**
 * Body CSS
 */

html,
body {
  height: 100%;
  background-color: #eee;
}

html,
body,
input,
textarea,
buttons {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}


/**
 * Layout CSS
 */

 header, main, footer {
   padding-left: 300px;
 }

 @media only screen and (max-width : 992px) {
   header, main, footer {
     padding-left: 0;
   }
 }


/**
 * helper Classes
 */
.no-margin {
  margin: 0px !important;
}

＆＃13;

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">




    <body>
      <header>
        <div class="navbar-fixed">
          <nav class="blue" role="navigation">
              <div class="nav-wrapper container">
                <a href="!#" data-activates="nav-mobile" class="button-collapse left no-margin"><i class="material-icons">menu</i></a>
                <a class="brand-logo">Logo</a>
                <ul class="right hide-on-med-and-down">
                    <li><a id="" href="#">Link</a></li>
                    <li><a id="" href="#">Link</a></li>
                    <li><a href="#" target="_blank">Link</a></li>
                    <li><a href="#" target="_blank">Link</a></li>
                </ul>
              </div>
          </nav>
        </div>
        <ul id="nav-mobile" class="side-nav fixed">
            <li><a id="" href="#">Link</a></li>
            <li><a id="" href="#">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
            <li><a href="#" target="_blank">Link</a></li>
        </ul>
      </header>
      <main>
        <div class="container">
          <div class="section">
            <br>
            <h1>Brand.io</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin volutpat molestie. Nullam id tempor nulla. Aenean sit amet urna et elit pharetra consequat. Aliquam fringilla tortor vitae lectus tempor, tempor bibendum nunc elementum. Etiam ultrices tristique diam, vitae sodales metus bibendum id. Suspendisse blandit ligula eu fringilla pretium. Mauris dictum gravida tortor eu lacinia. Donec purus purus, ornare sit amet consectetur sed, dictum sit amet ex. Vivamus sit amet imperdiet tellus. Quisque ultrices risus a massa laoreet, vitae tempus sem congue. Maecenas nec eros ut lectus vehicula rutrum. Donec consequat tincidunt arcu non faucibus. Duis elementum, ante venenatis lacinia cursus, turpis massa congue magna, sed dapibus felis nibh sed tellus. Nam consectetur non nibh vitae sodales. Pellentesque malesuada dolor nec mi volutpat, eget vehicula eros ultrices.</p>
            <p>Aenean vehicula tortor a tellus porttitor, id elementum est tincidunt. Etiam varius odio tortor. Praesent vel pulvinar sapien. Praesent ac sodales sem. Phasellus id ultrices massa. Sed id erat sit amet magna accumsan vulputate eu at quam. Etiam feugiat semper imperdiet. Sed a sem vitae massa condimentum vestibulum. In vehicula, quam vel aliquet aliquam, enim elit placerat libero, at pretium nisi lorem in ex. Vestibulum lorem augue, semper a efficitur in, dictum vitae libero. Donec velit est, sollicitudin a volutpat quis, iaculis sit amet metus. Nulla at ante nec dolor euismod mattis cursus eu nisl.</p>
            <p>Quisque interdum facilisis consectetur. Nam eu purus purus. Curabitur in ligula quam. Nam euismod ligula eu tellus pellentesque laoreet. Aliquam erat volutpat. Curabitur eu bibendum velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc efficitur lorem sit amet quam porta pharetra. Cras ultricies pellentesque eros sit amet semper.</p>
          </div>
        </div>
      </main>


      <footer class="page-footer blue">
        <div class="container">
          <div class="row">
            <div class="col l6 s12">
              <h5 class="white-text">Footer Content</h5>
              <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
            </div>
            <div class="col l4 offset-l2 s12">
              <h5 class="white-text">Links</h5>
              <ul>
                <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
                <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="footer-copyright">
          <div class="container">
          Made with ♥ by BusinessCoder
          <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
          </div>
        </div>
      </footer>

      

    </body>

＆＃13;

请参阅屏幕截图＆gt; = 992px。请注意徽标是如何不与内容刷新的

见截图＆lt; 992px。请注意，菜单图标将使用内容

刷新

Answer 1

应该有其他方法来解决您的问题。您遇到此问题是因为您的导航有position: fixed而width: 100%另一方面您将padding-left: 300px添加到导航的父级（以及其他元素）但是当您拥有fixed元素时它不会调整到其父级，然后将npx移到两侧。

请注意：这不是唯一的解决方案。

<强> CSS ：

nav {
    color: #fff;
    background-color: #ee6e73;
    width: calc(100% - 300px);/* this will fix your issue */
    height: 56px;
    line-height: 56px;
}

在css中更新nav或在主css文件的最后一行添加上述代码。

<强>更新

这适用于此问题

在

下

/**
 * Layout CSS
 */

 header, main, footer {
   padding-left: 300px;
 }

 /**
  * fix the left align for brand-logo
  */
 nav {
   width: calc(100% - 300px);
 }

 @media only screen and (max-width : 992px) {
   header, main, footer {
     padding-left: 0;
   }
   /**
    * allows the menu button to be left-aligned in < 992px screen
    */
   nav {
     width: 100%;
   }
 }

为什么品牌标识在整页宽度时不与内容保持一致？

1 个答案: