Question

我已经在小屏幕上使用引导程序4在单击切换按钮时将导航栏推到它下面的div上创建了导航栏。任何人都可以帮我解决这个问题。我希望在应用固定顶部类时出现菜单。为了避免div跳动和onclick出现，应该生成一个菜单覆盖。我为div设置了包含菜单项的绝对位置和div之后的相对位置。我希望div居中对齐。有人可以帮我吗这个。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div  class="container-fluid paddingAlign">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img src="img/logo_03.png" alt="logo" class="img-fluid">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent" style="position:absolute;">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="boats.html">BOATS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services.html">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="durrat.html">DURRAT MARINA</a>
                </li> 
                <li class="nav-item">
                    <a class="nav-link" href="about.html">ABOUT US</a>
                </li>  
            </ul>
        </div>
    </nav>
</div>


<div class="container-fluid" style="position:relative;">
    <div class="row">
        <div class="col-12">
            <img src="http://tissertechnologies.com/Projects/2019/design/suprema/img/bot-slider.jpg" class="img-fluid" alt="banner"/>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

Answer 1

您是否需要这样，因为我不能简短地理解您的问题

我要从代码中删除职位，因为您想将div元素压入下面。

fixed-top使用top: 0，因此，如果不需要，侧边栏将固定在顶部。编写自定义CSS。

.custom__navbar {
  position: fixed !important;
  left: 0;
  right: 0;
  z-index: 1030;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div  class="container-fluid paddingAlign">
    <nav class="navbar navbar-expand-lg navbar-light bg-light custom__navbar">
        <a class="navbar-brand" href="#">
            <img src="img/logo_03.png" alt="logo" class="img-fluid">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto text-center">
                <li class="nav-item">
                    <a class="nav-link" href="boats.html">BOATS</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services.html">SERVICES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="durrat.html">DURRAT MARINA</a>
                </li> 
                <li class="nav-item">
                    <a class="nav-link" href="about.html">ABOUT US</a>
                </li>  
            </ul>
        </div>
    </nav>
</div>


<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <img src="http://tissertechnologies.com/Projects/2019/design/suprema/img/bot-slider.jpg" class="img-fluid" alt="banner"/>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

导航栏切换将div推到其下方

1 个答案: