Question

这是看问题的小提琴。

<header>
    <nav class="navbar navbar-inverse" role="navigation ">
        <div class="col-md-12" style="height:150px;background-color:#FFFFFF">
            <div class="col-md-3" ><a href="index"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/200px-Google_%22G%22_Logo.svg.png"></a></div>
            <div class="col-md-9" ><h1>Tag line will come here and it will be managed dynamically</h1></div>
        </div>
        <div class="col-md-12">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right"> 
                    <li><a href="home">HOME</a></li>
                    <li><a href="contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

我在上面的代码中使用Bootstrap 3，它在台式机/笔记本电脑等上工作正常。但是当我在移动设备或调整大小的浏览器中看到它在较小的屏幕上看时，它按以下顺序显示。所以问题是，当我点击切换图标时，在较小的屏幕中，导航按钮会重叠标记线。

标志
导航切换图标
基于文字的标记行

我想按照以下顺序显示。因此，即使我在较小的屏幕中看到它们，导航按钮也不应与标记线重叠。

标志
基于文字的标记行
切换导航切换图标

请告诉我如何获得所需的结果。

Answer 1

按如下方式更新您的代码：

<强> CSS：

     @media only screen and (max-width: 768px) {
     body {
     background-color: orange; //FOR TESTING PURPOSE
     }

     #tagstyle {
      position: relative;
      left: 220px;
      top: -200px;
      padding: 0px;
      width: 60%;      
      }
}

HTML： [添加如下所示的ID]

<h1 id="tagstyle">Tag line will come here and it will be managed dynamically</h1>

桌面视图

移动视图

Answer 2

检查style =＆＃34; height：150px; background-color：#FFFFFF＆＃34;你在高处发生冲突：150px;而且我认为你需要使用push and pull in bootstrap。

Bootstrap 3 - 导航按钮重叠文本问题

2 个答案: