为什么我的页脚比我的引导容器宽答案

【问题标题】：why is my footer wider than my bootstrapcontainer为什么我的页脚比我的引导容器宽
【发布时间】：2022-01-04 14:09:21
【问题描述】：

我将页脚放在 col-md-12 容器的最后一行，并希望页脚与 col-md-12 容器的宽度相同。相反，它正确地从容器的左侧开始，但在右侧结束于显示边框而不是容器。

<html>
<head>
<title>footertest</title>

  <!-- bootstrap -->
 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



 <style>
    .myleft{
    width: 100%;
    background-color: rgb(227, 236, 97);
    height: 400px;
    }

    .myright{
    width: 100%;
    background-color: rgb(19, 197, 49);
    min-height:100%;
    }


    .mytest{
    width: 100%;
    background-color: aqua;
    height:50px;
    position:fixed;
    bottom:0;
    }

 </style>

</head>

<body>
      <div class="container">
        <div  class="row " >  <!-- arbeitsbereich links + rechts- -->
            <div  class="col-md-6 myleft">  <!-- linke Haelfte -->
                this is the left side (col-md-6)
            </div>

            <div  class="col-md-6 myright" >    <!-- test1 hat den style lightblue im css-->
                <!-- rechte Haelfte--> 
                this is the right side (col-md-6)             
            </div>
        </div>


        <div  class="row " >
          <div  class="col-md-12 mytest">
            this is my footer. It starts correctly at the left side of the container, but ends at the right site of the display instead of the container
          </div>  
        </div>

      </div>   
            

</body>
</html>

这是结果的截图：

https://zaunraum.de//IsMobileTest/footer.jpg

【问题讨论】：

标签： footer

【解决方案1】：

这是因为固定位置的宽度与显示的位置无关（就像你将这个元素放置在绝对位置一样）

元素显示在容器外，不考虑 col-md-12 的宽度

就像你把 100% 的宽度放在类 .mytestin 上一样，这个会占用整个页面的宽度

你有不同的方法来解决你的问题：

在页脚设置最大宽度
在页面上设置页边距

但在所有情况下，您都必须将您的元素视为一个独立的元素

【讨论】：

【解决方案2】：

我通过将页脚创建为独立元素（如 jeremy-denis 所建议）然后将 col-md-12 容器插入页脚来解决了这个问题。然后它的行为 natrlih 与主容器完全一样。感谢您的帮助。

【讨论】：

如果您成功解决了您的问题，那就太好了；）如果我的回复有助于您找到解决方案，我可以请您标记一下吗？