时间戳

首页 > 解决方案 > 使 img 仅出现在 Jumbotron div 中

html - 使 img 仅出现在 Jumbotron div 中

问题描述

我是引导程序的新手，我想知道为什么图像与 jumbotron 重叠，我只需要图像留在 Jumbotron 类中。这是图像： 图像与 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/

在这个主题中，请注意 "portfolio" 、 "About" 和 "Contact" 与浏览器的大小相似。

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

标签： htmlcss

解决方案

你应该给overflow:hidden到jumbotron类并根据需要管理img的css

推荐阅读