时间戳

首页 > 解决方案 > Bootstrap.4 如何让 div 内容高于导航

html - Bootstrap.4 如何让 div 内容高于导航

问题描述

我想让联系信息显示在导航上方，但它一直试图将其浮动到左侧。我希望内容与移动设备上的导航一起折叠。我不知道我在这里错过了什么。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/150x50?text=Logo" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
  <div class="container contactinfo">
    <div class="row">
      <div class="col-4 headerPhone">
        123-456-7890
      </div>
      <div class="col-4 headerEmail">
        <a href="hello@hello.com">hello@hello.com</a>
      </div>
      <div class="col-4 headerSocial">
        <a href="#" target="_blank" title="Facebook">
          <i class="fab fa-facebook-square"></i>
        </a>
        <a href="h#" target="_blank" title="Twitter">
          <i class="fab fa-twitter-square"></i>
        </a>
        <a href="#" target="_blank" title="Pinterest">
          <i class="fab fa-pinterest-square"></i>
        </a>
      </div>
    </div>
  </div>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</div>

https://codepen.io/johndu/pen/YzzxgyR

我正在寻找与此类似的结果：https ://ap-luxor.agentimage.com/

标签： htmlcssbootstrap-4

解决方案

如果您想要导航栏上方的联系信息（但仍然通过相同的切换按钮在移动设备上折叠）为什么不使用单独的导航栏？

https://www.codeply.com/go/HAUo3s24Pa

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div class="collapse navbar-collapse">
            <div class="nav navbar-nav w-100 flex-row">
                <div class="navbar-text headerPhone">
                    123-456-7890
                </div>
                <div class="navbar-text headerEmail text-center mx-auto">
                    <a href="hello@hello.com">hello@hello.com</a>
                </div>
                <div class="navbar-text headerSocial text-right">
                    <a href="#" target="_blank" title="Facebook">
                        <i class="fab fa-facebook-square"></i>
                    </a>
                    <a href="h#" target="_blank" title="Twitter">
                        <i class="fab fa-twitter-square"></i>
                    </a>
                    <a href="#" target="_blank" title="Pinterest">
                        <i class="fab fa-pinterest-square"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="http://placehold.it/150x50?text=Logo" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

另请参阅：Bootstrap 4 将两个导航栏折叠成一个切换按钮

推荐阅读