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上的边距，即为什么您在顶部和左侧都有所有这些空白。
或者我看到您在某些情况下使用绝对位置，请尝试使用最少的位置，否则您将有更多工作要做响应。

Answer 2

从屏幕快照中，您似乎已将边框分配给行或列类，请尝试以下CSS代码：

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

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

2 个答案: