Question

我目前正在学习Bootstrap，并决定让自己成为一个简单的个人网站。在左上角，在导航栏中，我想说出我的名字。在右边我想有三个菜单选项（about，projects＆amp; Contact）。但是，在为我的名字调整文本大小（使用CSS最多60px）时，网站在计算机上看起来没问题（在对导航栏大小进行一些修改之后），但是当我在手机上打开网站时，文本会重叠。我的名字和姓氏是相互重叠的，右下方是导航栏项目。

我不确定我是否遗漏了一些简单的东西（比如使用不同的Bootstrap类），但我已经广泛寻找没有结果的解决方案。以下是相关的HTML / CSS文件。

HTML：

  <nav class="navbar navbar-default">
     <div class="container-fluid">

        <!-- Name -->
        <div class="navbar-header">
            <a href="#" class="navbar-brand" id="myNameHeader">My Name Goes Here</a>            
        </div>

        <!-- Menu Items -->
        <div>
            <ul class="nav navbar-nav navbar-right" id="right_menu_items">
                <li><a href="index.html">About</a></li>
                <li class="active"><a href="projects.html">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.navbar>ul>li>a {
   padding-top: 5px;
   padding-bottom: 5px
}

.navbar {
  min-height: 80px;
}

#myNameHeader {
  font-size: 60px;
  padding-top:20px;
  padding-bottom: 40px;
  position: relative;
}

#right_menu_items {
  padding-right: 10px;
  padding-top: 14px;
}

Answer 1

要纠正此问题，您需要设置文字的行高。这将禁止您的文本覆盖自己。

#myNameHeader {
  font-size:60px;
  line-height:60px;
  padding-top:10px;
  padding-bottom:10px;
}

但还有另一个问题，当你这样做时，你的文字会覆盖导航栏菜单。原因是因为twitter boostrap navbar-brand的固定高度等于50px。要修复，只需将navbar-brand更改为“auto”。

.navbar-brand {
  height:auto;
}

检查我的代码：http://codepen.io/eMineiro/pen/reEYXY

Answer 2

根据 bootstrap navbar menu overlaps text

尝试将导航类更改为navbar-static-top

Bootstrap Navbar标题文本在较小的屏幕上重叠

2 个答案: