chrome浏览器变窄时如何修复导航栏消失？答案

【问题标题】：How to fix navbar from disappearing when chrome browser is narrowed?chrome浏览器变窄时如何修复导航栏消失？
【发布时间】：2023-03-13 22:55:01
【问题描述】：

我希望放置在右侧的导航栏列表与位于左侧的标题图标下方对齐。可以通过创建一个按钮来表示它来切换导航栏列表，但我希望它只是在标题图标下展开。

另外，我知道消失是由于 navbar-expand-lg 类。我应该如何解决这个问题？是否可以通过引导程序？或者它可以用 HTML 和 CSS 来修复，因为我不希望它用 javascript 来完成。

HTML

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
   <div class="container"> 
       <a class="navbar-brand" href="#">MADHUMITHA PRABAKARAN</a>
   </div>

   <!-- 

       <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
           <span class="navbar-toggler-icon"></span>
       </button>

   -->

   <div class="container"> 
       <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav ml-auto">
               <li class="nav-item">
                   <a class="nav-link" href="index.html">About</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="portfolio.html">Portfolio</a>
               </li>
               <li class="nav-item">
                   <a class="nav-link" href="contact.html">Contact</a>
               </li>
           </ul>  
       </div>
   </div>
</nav>

CSS

.navbar{
    background: #ffffff;
    border-style: solid;
    border-color: #cccccc;

    border-width: 2px;
    border-left-style: hidden;
    border-right-style: hidden;
    border-top-style: hidden;

    top:0;

}
 .navbar-brand {
    background-color: #4aaaa5;
    color: white;
    font-size: 200%;
    font-family: 'Times New Roman', Times, serif;
    text-align: justify;
    margin-top:-10px;
    margin-bottom: -10px;
}

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

我猜你想用你的<a>your title</a>as 切换并保持它以各种尺寸显示。那么你只需要将class="navbar-brand"改为class="navbar-brand d-block"即可覆盖.navbar-brand不同大小的"display:none"。您可以使用以下代码 sn-p 作为一个想法，它与官方文档略有不同。在整页中运行它并调整窗口大小。

如果你想添加任何 CSS 样式。尝试做类似的事情

<div class="navbar-brand newstyle">

然后将 .newstyle { something here } 添加到您的 css 样式表中，而不是直接修改 navbar-brand，除非您非常确定要覆盖网站中所有 navbar-brands 的引导 css 样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<nav class="navbar navbar-expand-sm">
<div class="container-fluid d-block">
  <div class="row">
    <div class="col-12">
      <a class="navbar-brand navbar-toggler d-block" data-toggle="collapse" data-target="#collapsibleNavbar" href="#">Navbar</a>
     </div>
  </div>
  <hr>
  <div class="row">
  <div class="col-12">
  <div class="collapse show navbar-collapse" id="collapsibleNavbar" aria-expanded="true">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>    
  </div>
  </div>
</div>
</nav>

【讨论】：

当屏幕尺寸
您可能应该查看不同尺寸的代码 sn-p，除了屏幕尺寸的断点外，这看起来就像您所说的那样。并且 bootstrap 具有您可能想要检查的不同大小的特定断点 (w3schools.com/bootstrap4/bootstrap_grid_system.asp)。我不建议您使用自己的断点。