Question

我正在通过template.php php呼叫include页面。我在index.php页面和html页面中有一个bootstrap导航栏。执行tepmlate.php导航栏时，会在index.php导航栏上显示。

我想在template.php导航栏下方显示index.php导航栏，即我希望整个html文件显示在index.php导航栏下方，以下是html代码：

的template.php

<header id="navigation">
    <div class="navbar navbar-inverse navbar-fixed-top" role="banner">
        <div class="container">
            <div class="navbar-header" data-nitspagelabel="1">....

index.php

<nav class="navbar navbar-default navbar-fixed-top editbar">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">

CSS文件：

.editbar {
  height: 44px;
  position: fixed;
  width: 100%;
  min-width: 600px;
  box-shadow: 0 0 15px 0 rgba(22, 45, 61, 0.5);
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 100;
  line-height: 48px;
  margin-bottom: 1px;
  transition: 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) top;
 }

是否有任何jquery函数可以解决此问题或任何css更改？

Answer 1

您只需在top: 44px导航栏中添加template.php。

Simple Bootply Example

.editbar {
  min-height: 44px; /* Override min-height of 50px */
  height: 44px;
}
.template-nav {
  top: 44px;
}

<div class="navbar navbar-inverse navbar-fixed-top template-nav" role="banner">
  <div class="container">
    <div class="navbar-header" data-nitspagelabel="1">template.php</div>
  </div>
</div>

<nav class="navbar navbar-default navbar-fixed-top editbar">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">index.php</div>
  </div>
</nav>

Answer 2

使用margin-top: 50作为样式，使其显示在您想要显示在另一个下方的任何一个栏上。我已经为演示创建了一个示例小提琴。

<强> HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

<nav class="navbar navbar-default navbar-fixed-top php-bar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName2</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

<强> CSS：

.php-bar {
    margin-top: 50px;
}

<强> JSFIDDLE

如何强制navbar-fixed-top在一定高度后显示

2 个答案: