时间戳

首页 > 解决方案 > 为什么我在使用 Bootstrap 时会出现红线

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

问题描述

我正在为一家初创公司开发一个小型网站，该网站在台式机上运行良好，但我正在尝试使用 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>

标签： htmlcssbootstrap-4responsive-design

解决方案

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

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

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

  1. 减少容器上的填充或 div 上的边距，这就是为什么你在顶部和左侧都有所有这些空白。
  2. 或者我看到你在某些情况下使用绝对位置，尽量使用到最低限度，否则你将有更多的工作来尝试做出响应。

推荐阅读