Question

我目前有一个导航栏：

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

以下图片位于容器底部：

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

然而，下面的图像与文本重叠。我如何设置图像的样式，使其“按下”页面上的所有内容，使其不会与任何文本重叠（与导航栏的行为方式相同）

Answer 1

粗略的解决方案是使用<br/>标记添加换行符。此方法会将图像与导航栏分开。另一种解决方案是在两者之间放置间隔标签。这可以通过调整<div>标记的高度来完成。

虽然你当然不必，我使用的API允许我指定一个类名

spacer(height of spacer in pixels)

或者，例如，如果我想要250像素的高度，

spacer250

虽然API在函数调用

时更改了标记的高度

$scs.createSpacers('div');

如果您想使用该API，可以在this link找到该库。

Answer 2

它简单，只需提供图像的宽度和高度。如果这是你想要的

<!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>

Answer 3

如果图片已经存在，您可以将图片放在导航栏之外。否则，您可以将display: block添加到图片中，将其推送到自己的行。此外，您可以使用边距或定位来正确对齐。

＆＃13;

body {
  font-family: sans-serif;
}
nav {
  display: inline-block;
  background-color: #eee;
}
ul {
  overflow: auto;
  padding: 1rem 2rem;
  list-style-type: none;
}
li {
  float: left;
  margin: 0.25rem 0.5rem;
}
a {
  text-decoration: none;
  text-transform: uppercase;
  color: #555;
}
img {
  display: block;
  width: 5.65rem;
}

＆＃13;

<nav>
  <ul>
    <li>
      <a href="#">item 1</a>
    </li>
    <li>
      <a href="#">item 2</a>
    </li>
    <li>
      <a href="#">item 3</a>
    </li>
  </ul>
</nav>
<img src="http://i.imgur.com/iyzGnF9.jpg">

＆＃13;

在navabar下的图像

3 个答案: