Bootstrap 分隔线在较小的屏幕上移位

Question

我目前正在开发一个网站，这是我的第一个引导网站之一。

面临一个我已经尝试解决了几个小时的问题。

我正在将我在 Photoshop 中制作的分隔符或分隔符（png 图像）放在部分的边缘。

在桌面尺寸上看起来像这样：

https://www.dropbox.com/s/qxf7dheb0k79q2b/Screenshot%202014-09-30%2023.02.50.png?dl=0

但在较小的屏幕上会发生这种情况：

https://www.dropbox.com/s/w4je7milallfrqn/Screenshot%202014-09-30%2023.10.50.png?dl=0

我确定是因为我的 CSS 不好。

这是我的html和css：

<section class="hero-section text-center">
  <img class="separator img-responsive"src="images/separator.png">
  <div class="container">
    <h1>Download Now</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
    <button class="btn btncta">Download Now</button>
    <p class="small">*Needed for developers</p>
  </div>
</section>

CSS：

.separator{
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:318px;

}

有什么办法可以解决这个问题？

是否使用图像作为分隔线已过时（可能是）？

Answer 1

使用那种分隔图像方法并没有错，但你做错了。只需像这样替换您的 CSS：

.separator{
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:0px;
width:100%; height:1px;
}

你的 HTML 是这样的：

<section class="hero-section text-center">

  <div class="container">
    <h1>Download Now</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
    <button class="btn btncta">Download Now</button>
    <p class="small">*Needed for developers</p>
  </div>
  <img class="separator "src="images/separator.png">
</section>

我做了一个bootply，所以你可以看到（不需要背景颜色，只是为了让你看到效果，因为我没有你的图像）

根据新信息添加新方法：

/* CSS used here will be applied after bootstrap.css */
 body {
    background:#f00;
}
.separator {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:0px;
    background:#f00;
    width:100%;
    height:1px;
}
.hero-section {
    background:#fff url('http://www.customstairsandmouldings.com/images/circle.jpg') no-repeat center bottom; / we center the background and position it at the bottom of the div */
    padding-bottom: 100px; /* padding-bottom has to be enough to give room to the image in the background, so if image height is 80px, padding bottom should be at least 80px, or better 100px to add spacing */
}

见new Bootply here