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

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

1 个答案: