在較小的屏幕上移動自舉分隔線

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