html - 为什么我在使用 Bootstrap 时会出现红线

Question

我正在为一家初创公司开发一个小型网站该网站在台式机上运行良好，但我正在努力使其响应速度更快使用 Bootstrap 网格系统，但是我得到红色网格线

我做错了什么？

截图

HTML 和 CSS 代码如下

<section class="tds-banner">
<div class="overlay">
    <div class="description">


<div class="container">

<div class="row">
            <div class="col-xs-12 col-sm-12">
    <h1>Fishing Club Studios</h1>
</div>
</div>

<div class="row">
<div class="col--xs-12 col-sm-12">
    <h5>We Make food and We drinks</h5>
</div>
</div>

<div class="row">

<div class="col-6">
    <a href="#" class="btn btn-primary shadow mr-2">Food</a>

</div>
<div class="col-6">
<a href="#" class="btn btn-primary shadow mr-2">Drinks</a>
    </div>


</div>
</div>
</div>

    </section>



   <style>
  <!--CSS-->

  @media only screen and (min-device-width: 300px) {
        .tds-banner .overlay{
        position: absolute;
        min-height: 100%;
        min-width: 100%;
        left: 0;
        top: 0;
            background-image:url('/static                                                                                                      /talking_drumstudios_logo_360.png');
            background-attachment: fixed;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;

            }

              .description {
               font-size: 20px;
                border: none
                }



                   }
       </style>

Answer 1

当您发现使用框架覆盖的边框存在此类问题时，请检查元素并尝试以下属性:

border: none;
box-shadow: none;
outline: none;

关于您的文本问题，我无权访问您的代码，但您可能有:

1. 减少容器上的填充或 div 上的边距，即为什么你在顶部和左侧有所有这些空白区域。
2. 或者我看到您在某些情况下使用了绝对位置，请尝试将其使用到最低限度，否则您将有更多的工作来尝试实现响应能力。