Question

我是Bootstrap的新手，我想知道为什么图像与巨型波谱重叠，我需要将图像保留在Jumbotron类中。这是图片： Image overlapping the class Jumbotron

代码如下：

   <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Coffee Cafe</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
  <link rel="stylesheet" type="text/css" href="bootstrap.css">
  <link rel="icon" href="Images/Free-Coffee-Logo-1-999x999.png">
</head>
<body>
  <div>
      <nav class="navbar navbar-expand-lg navbar-light bg-light" >
              <a class="navbar-brand active" href="#">
                <img src="Images/Free-Coffee-Logo-1-999x999.png" width="30" height="30" class="d-inline-block align-top" alt="">
                Insta Coffee
              </a>
              <ul class="nav navbar-nav ml-auto">
                      <li class="nav-item"><a class="nav-link" href="#">Who We Are</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">What We Do</a></li>
                      <li class="nav-item"><a class="nav-link" href="#">Contact Us</a></li>
              </ul>        
        </nav>
  </div>
  <div class="jumbotron text-center">
    <img class=" rounded float-left" src="Images/pexels-photo-437716.jpeg" alt="Coffee for front page">
      <div class="page-header">
        <h1>The More You Sip, the More You'll Love</h1>
      </div>
      <p>Lifes pleasurable moments is just one sip away!</p> 
    </div>

<div>
  <p class="text-center">Who We Are</p>

    <p>
      We are a team of coffee makers dedicated to give you the best coffee.
      Our team composes of people with 10 years of experience making coffee
    </p>


</div>

<div>
<p class="text-center">What We Do</p>

<p>
  We specialize with some of the most popular coffee in the market such as:
</p>

<ul>
  <li>Caffè Americano</li>
  <li>Café Latte</li>
  <li>Cappuccino</li>
  <li>Espresso</li>
  <li>Flat White</li>
  <li>Flat White</li>
</ul>
</div>


<div>
  <p class="text-center">Contact Us</p>
</div>

</body>
</html>

此外，我正计划建立一个与此主题相似的网站：https://blackrockdigital.github.io/startbootstrap-freelancer/

在此主题中，请注意“组合”，“关于”和“联系” 就像浏览器的大小一样。

我希望我的“我们是谁”，“我们做什么”和“与我们联系”是这样的。我应该上什么课？

Answer 1

您应该给overflow：隐藏到巨型机类并根据需要管理img的css

Answer 2

使用display:block;

使图像的父锚标签成为块元素

使img仅出现在超大型div中

2 个答案: