html - Bootstrap 分隔符在较小的屏幕上移位

Question

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

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

我将我在 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