html - 导航栏下的图像

标签 html css

我目前有一个这样的导航栏:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

以及容器底部的下图:

    <img class="img-responsive" src="Images/test.png" alt="">
<!-- End of container -->

但是下面的图像与文本重叠。我如何设置图像样式,使其将页面上的所有内容“向下推”,使其不与任何文本重叠(与导航栏的行为方式相同)

最佳答案

很简单,给图片提供宽度和高度即可。如果这是你想要的

<!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/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
 </head>
 <body>

<div class="container">
 <h2>Image</h2>
  <p>The .img-responsive class makes the image scale nicely to the parent 
element (resize the browser window to see the effect):</p>
  <img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" 
 height="345"> 
 sdadsada
</div>
</body>
</html>

关于html - 导航栏下的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45490540/

相关文章:

html - 为什么我的 css 或 js 不适用于 firefox?

javascript - 内联列表 - 有哪些方法可以使元素等于最大宽度?

css - 图标字体与图像

javascript - 双击表 : Don't select the other cells

html - 如何防止一个标签干扰另一个标签的居中

javascript - 使绝对定位的div覆盖视口(viewport)

css - compass 编译错误的 Unicode 字符

css - 将鼠标悬停在 "hot"图标上时,如何防止延迟显示 "disabled"图标?

css - 哪个更快 : hex color codes or color names?

javascript - 从图像映射中的链接在 div 内平滑滚动