Html 小屏幕上的引导分隔器

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

面对一个我已经努力解决了几个小时的问题

我把我在photoshop png图像中制作的分隔符或分隔符放在一个部分的边缘上

在桌面大小上看起来是这样的：

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

我肯定这是因为我的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:0px;
width:100%; height:1px;
}

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

您的HTML如下所示：

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

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

---

请参见

为什么要使用相对定位？这就是问题所在。而是将其放在html中的正确位置，可能是当前的位置。同样，你是对的，你可以不用图像来做这件事。谢谢你，法比奥。不幸的是，它没有起作用。这是结果，我只改变了高度，这是因为我认为你只使用了一条直线，哈哈。所以只需删除宽度和高度属性，应该可以工作，但老实说，在这种情况下，你最好的选择是使用图像作为背景，使其始终位于div的底部，例如下一个div的顶部哦！真是个好主意。谢谢你，伙计。这种方法的问题是背景图像方法，我不知道如何将图像和蓝色都作为背景。啊，哈哈，我把它作为编辑添加到了答案中，因为我不想给你留下一个半答案，请查看编辑很棒！非常感谢，伙计，谢谢你。