为什么我在使用 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;

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

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

Answer 2

从您的屏幕截图来看，您似乎已经为行或列指定了边框 class，试试这个 CSS 代码：

.row,col-*{
border-width:0px;
}

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

Why am I getting red lines when I'm using Bootstrap

html

css

responsive-design

bootstrap-4