Question

我正在尝试在 Bootstrap 5 中包含一个 400 x 100 png 徽标作为导航栏品牌图像。但是，该徽标似乎有点太大，即使我减小了logo，它仍然与桌面视图中导航栏下方的黑色容器和文本输入框重叠。在移动设备中，徽标和关联的导航栏重叠得更多。此外，右侧的切换按钮未与左侧的品牌形象水平对齐。我希望他们在同一条线上。为了清楚起见，附上一些屏幕截图。有人可以帮忙吗？

桌面视图

移动视图

我还希望品牌形象在移动视图中更靠左对齐。我正在附上 HTML 代码以供审核。

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Localhost Site - Classroom Attendance</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Testing HTML 5 and Bootstrap 5">
  <meta name="keywords" content="html5,bootstrap5">
  <meta name="author" content="classroom">
  <!-- Bootstrap 5 -->
  <link rel="stylesheet" href="css/bootstrap.min.css"></link>
 </head>
 <body>
  <div class="container">
   <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
    <!-- Navbar Brand -->
    <div class="container-fluid">
     <a class="navbar-brand" href="#">
      <img src="media/fadmeter-logo.png" alt="Classroom Logo" width="250" height="62.5">
     </a>
    </div>
    <!-- Toggler/Collapsible Button -->
    <div class="container-fluid">
     <button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
      <span class="navbar-toggler-icon"></span>
     </button>
     <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
      <ul class="navbar-nav ms-2 align-items-end">
       <li class="nav-item">
        <a class="nav-link" href="#">Resources</a>
       </li>
       <li>
        <a class="nav-link" href="#">Contact</a>
       </li>
       <li>
        <a class="nav-link" href="#">Login</a>
       </li>
       <li>
        <form action="#">
         <input type="submit" class="btn btn-primary" value="Register">
        </form>
       </li>
      </ul>
     </div>
    </div>
   </nav>
  </div>
  <br>
  <!-- Code Input Area -->
  <div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
   <form action="#">
    <div class="input-group mb-3">
     <div class="input-group-prepend">
      <span class="input-group-text">#</span>
     </div>
     <input type="text" class="form-control" placeholder="Enter Code">
     <div class="input-group-append">
      <button class="btn btn-primary" type="submit">Go</button>
     </div>
    </div>
   </form>
  </div>
  <br>
  <!-- Headline and Description -->
  <div class="container">
   <h3>My Headline Text</h3>
   <p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
  </div>
  <!-- Headline and Description -->
  <div class="row mx-5">
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-warning">
     <img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
     <div class="card-body">
      <h5 class="card-title">Class 1</h5>
      <p class="card-text">All students in class room 1.</p>
     </div>
    </div>
   </div>
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-info">
     <img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
     <div class="card-body">
      <h5 class="card-title">Class 2</h5>
      <p class="card-text">All students in class room 2.</p>
     </div>
    </div>
   </div>
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-warning">
     <img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
     <div class="card-body">
      <h5 class="card-title">Class 3</h5>
      <p class="card-text">All students in class room 3.</p>
     </div>
    </div>
   </div>
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-info">
     <img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
     <div class="card-body">
      <h5 class="card-title">Class 4</h5>
      <p class="card-text">All students in class room 4.</p>
     </div>
    </div>
   </div>
  </div>
  <!-- Bootstrap 5 -->
  <script src="js/bootstrap.bundle.min.js"></script>
 </body>
</html>

Answer 1

从图像标签中移除宽度高度并在图像标签中使用“img-fluid”类。或者在移动视图中，您可以使用绝对位置

Answer 2

感谢@Minhaj 提供的建议。我调整了我的代码，现在工作正常。我错误地将品牌形象放置在导航栏 div 之外的单独 div 中。这是我的新代码：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Localhost Site - Classroom Attendance</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Testing HTML 5 and Bootstrap 5">
  <meta name="keywords" content="html5,bootstrap5">
  <meta name="author" content="classroom">
  <!-- Bootstrap 5 -->
  <link rel="stylesheet" href="css/bootstrap.min.css"></link>
 </head>
 <body>
  <div class="container">
   <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
    <!-- Navbar Brand -->
    <div class="container-fluid">
     <a class="navbar-brand" href="#">
      <img class="img-fluid" src="media/fadmeter-logo.png" alt="Fadmeter Logo" width="200" height="50" style="position:absolute; top:0; left:0">
     </a>
     <!-- Toggler/Collapsible Button -->
     <button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
      <span class="navbar-toggler-icon"></span>
     </button>
     <div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
      <ul class="navbar-nav ms-2 align-items-end">
       <li class="nav-item">
        <a class="nav-link" href="#">Resources</a>
       </li>
       <li>
        <a class="nav-link" href="#">Contact</a>
       </li>
       <li>
        <a class="nav-link" href="#">Login</a>
       </li>
       <li>
        <form action="#">
         <input type="submit" class="btn btn-primary" value="Register">
        </form>
       </li>
      </ul>
     </div>
    </div>
   </nav>
  </div>
  <br>
  <!-- Code Input Area -->
  <div class="container rounded mt-5 pt-3 pb-1 bg-dark text-white" style="width:400px">
   <form action="#">
    <div class="input-group mb-3">
     <div class="input-group-prepend">
      <span class="input-group-text">#</span>
     </div>
     <input type="text" class="form-control" placeholder="Enter Code">
     <div class="input-group-append">
      <button class="btn btn-primary" type="submit">Go</button>
     </div>
    </div>
   </form>
  </div>
  <br>
  <!-- Headline and Description -->
  <div class="container">
   <h3>My Headline Text</h3>
   <p><span style="color:blue">Localhost</span> is a test page for HTML 5 and Bootstrap 5.</p>
  </div>
  <!-- Headline and Description -->
  <div class="row mx-5">
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-warning">
     <img class="card-img-top mx-auto" src="media/1.png" style="width: 96px" alt="1">
     <div class="card-body">
      <h5 class="card-title">Class 1</h5>
      <p class="card-text">All students in class room 1.</p>
     </div>
    </div>
   </div>
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-info">
     <img class="card-img-top mx-auto" src="media/2.png" style="width: 96px" alt="2">
     <div class="card-body">
      <h5 class="card-title">Class 2</h5>
      <p class="card-text">All students in class room 2.</p>
     </div>
    </div>
   </div>
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-warning">
     <img class="card-img-top mx-auto" src="media/3.png" style="width: 96px" alt="3">
     <div class="card-body">
      <h5 class="card-title">Class 3</h5>
      <p class="card-text">All students in class room 3.</p>
     </div>
    </div>
   </div>
   <div class="col-sm-3 mt-2">
    <div class="card text-center bg-info">
     <img class="card-img-top mx-auto" src="media/4.png" style="width: 96px" alt="4">
     <div class="card-body">
      <h5 class="card-title">Class 4</h5>
      <p class="card-text">All students in class room 4.</p>
     </div>
    </div>
   </div>
  </div>
  <!-- Bootstrap 5 -->
  <script src="js/bootstrap.bundle.min.js"></script>
 </body>
</html>

导航栏下方的 Bootstrap 品牌图像重叠容器

2 个答案: