如何修复bootstrap 4中的导航栏切换器？

时间：2019-11-11 22:00:36

标签： html css bootstrap-4

我创建了一个带有引导程序的导航栏，但在最小的屏幕上，导航栏切换器未与图像左侧对齐。它最终位于徽标上方。最糟糕的是，我不介意它位于底部，但理想情况下，我希望它位于徽标的左侧。

我尝试在没有帮助的元素周围添加容器。 

<div class="container">
      <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>Menu
      </button>
  <img src="images/irgLogo.jpg" class="mt-1 ml-4 img-fluid">

  <div class="collapse navbar-collapse" id="navbarResponsive">
      <span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="">Home</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="IRG Listings" >IRG Listings</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Property Search ">Property Search</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Communities on Candlewood Lake">Agents</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href=""  data-toggle="tooltip" title="Buyer Resources">Buying</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href=""  target="_blank" data-toggle="tooltip" title="Seller Resources">Selling</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href=""  target="_blank" data-toggle="tooltip" title="Contact Independent Realty Group">Contact</a><span class="hidden-md"><br></span>
  </div>
</div>

您可以在//candlewoodlakelifestyle.com/irg上查看问题 我没有收到任何错误消息，但切换开关拒绝在我想要的位置存在。

2 个答案:

答案 0 :(得分：2)

您是在寻找下面这样的东西还是更“常规”的东西？

我建议不要将导航放置在容器中。如果必须将其制成液体容器：

.nav-item {
  color: #fff;
  text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <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>Menu
          </button>
    <img src="images/irgLogo.jpg" class="mt-1 ml-4 img-fluid">

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="">Home</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="IRG Listings">IRG Listings</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Property Search ">Property Search</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Communities on Candlewood Lake">Agents</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Buyer Resources">Buying</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Seller Resources">Selling</a><span class="hidden-md"><br></span>
      <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Contact Independent Realty Group">Contact</a><span class="hidden-md"><br></span>
    </div>
  </nav>
</div>

更好的版本：

.nav-item {
  color: #fff;
  text-decoration: none;
}

.logo {color: #fff;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <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>Menu
          </button>

  <div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
    <a href="#" class="logo"><svg class="d-block" width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg></a>
    <span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="">Home</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="IRG Listings">IRG Listings</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Property Search ">Property Search</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Communities on Candlewood Lake">Agents</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" data-toggle="tooltip" title="Buyer Resources">Buying</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Seller Resources">Selling</a><span class="hidden-md"><br></span>
    <a class="nav-item mt-5 ml-4" href="" target="_blank" data-toggle="tooltip" title="Contact Independent Realty Group">Contact</a><span class="hidden-md"><br></span>
  </div>
</nav>

答案 1 :(得分：0)

只需删除按钮上的“菜单”文本即可。

<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>Menu
</button>

它在按钮的右侧增加了一个额外的空间。颜色设置为白色，这就是为什么您看不到它的原因。

我附上了一些屏幕截图，以便您查看。

Screenshot 1 Screenshot2

相关问题
最新问题