堆棧內存溢出
  簡體   English   中英

導航欄下方的 Bootstrap 品牌圖像重疊容器

[英]Bootstrap brand image overlapping container below the nav bar

 原文  2021-05-24 11:21:06  0   2    javascript/ html/ css/ twitter-bootstrap/ bootstrap-5

問題描述

我正在嘗試在 Bootstrap 5 中包含一個400 x 100 png 徽標作為導航欄品牌圖像。但是，該徽標似乎有點太大，即使我減小了徽標的大小，它仍然與黑色容器和文本重疊桌面視圖中導航欄下方的輸入框。 在移動設備中，徽標和相關的導航欄重疊得更多。 此外，右側的切換按鈕未與左側的品牌形象水平對齊。 我希望他們在同一條線上。 為了清楚起見，附上一些屏幕截圖。 有人可以幫忙嗎？

桌面視圖

在此處輸入圖像描述

移動視圖

在此處輸入圖像描述

我還希望品牌形象在移動視圖中更靠近左側。 我正在查看 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>

2 個解決方案

解決方案1
 1  2021-05-24 11:27:01

從圖像標簽中刪除寬度高度並在圖像標簽中使用“img-fluid”class。 或者在移動視圖中，您可以使用 position absolute

解決方案2
 0  2021-05-25 15:33:11

感謝@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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 bootstrap 3品牌名稱中間導航欄 Bootstrap導航欄品牌以移動為中心 引導導航欄的圖像上方 在彈出的導航欄下方添加圖像（標簽） 引導導航欄切換？ Bootstrap 導航欄故障 Bootstrap Responsive Nav Bar 引導導航欄崩潰問題 移動Bootstrap上的導航欄下拉菜單 Bootstrap下拉導航欄行為異常
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM