Question

想知道如何修复我github page的移动版本，我修改了一个自举模板。仅在移动版本上，导航栏会切断我投资组合中第一张图片的顶部。我无法弄清楚如何修复它，我认为问题出在导航栏中：

     <!-- navbar-->
<header class="header">
  <div role="navigation" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header page-scroll"><a href="index.html" class="navbar-brand">CHLOE WATSON COLLAGE</a>
        <div class="navbar-buttons">
          <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle navbar-btn ">Menu<i class="fa fa-align-justify"></i></button>
        </div>
      </div>
      <div id="navigation" class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="page-scroll"> 
              <a href="#portfolio">WORKS</a>
          </li>
          <li class = "page-scroll"> 
              <a href="#about">ABOUT</a>
          </li>
          <li class="page-scroll">
              <a href="#contact">CONTACT</a>
          </li>
      </div>
    </div>
  </div>
</header>

任何帮助非常感谢！谢谢！如果上面的代码不够，我也链接到我的存储库。

https://github.com/chloewatson/chloewatson.github.io/blob/master/index.html

Answer 1

首先要知道你的品牌名称 CHLOE WATSON COLLAGE 移动设备移动设备中的letter spacing

@media (min-width:0px) and (max-width:767px) {
.navbar a.navbar-brand {
             letter-spacing: 0;
            }
}

我觉得没问题，但如果这些不起作用，那么使用第二个css在最后一行添加你的css文件

    @media (min-width:0px) and (max-width:767px) {
        #portfolio {
            padding-top: 121px;
        }
       .navbar a.navbar-brand {
         letter-spacing: 0;
        }
    }

使用引导程序格式化移动响应github页面的问题

1 个答案: