Fatal编程技术网
  • html/
  • Html 引导4页脚未放置在底部

Html 引导4页脚未放置在底部

html css twitter-bootstrap bootstrap-4

Html 引导4页脚未放置在底部,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我想使用bootstrap-4创建一个带有页脚部分的简单主页。在这个例子中，我有一个主要部分和一个页脚部分，在代码中，这两个部分位于主要部分的下面，并且也用bottom:0设置样式但是奇怪的是在浏览器视图或移动视图中，它在屏幕的中间。 <div class="row"> <div class="col-xs-12 col-md-6 mt-100"> <h1 class="mb-4">Some Text</h1>

我想使用
bootstrap-4
创建一个带有页脚部分的简单主页。在这个例子中，我有一个主要部分和一个页脚部分，在代码中，这两个部分位于主要部分的下面，并且也用
bottom:0设置样式但是奇怪的是在浏览器视图或移动视图中，它在屏幕的中间。


    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>





    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>


HTML:



    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>



这是因为你的页面内容很小，无法填充页面高度，

您可能希望使
位置：相对然后使
底部为0
更改HTML和CSS，如


    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>



   <!-- MAIN SECTION WITH BACKGROUND IMAGE-->
<div class="d-flex flex-column h-100"> /*Change HERE*/
<section class="main-image flex-fill">  /*Change HERE*/
  <!-- MAIN CONTENT-->
  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-md-6">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some 
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>
  </div>

</section>

<!-- FOOTER SECTION-->
<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>
</div>  /*Change HERE*/


html,
body {
  min-height: 100%;
  height: 100%;
}


.mt-100 {
  margin-top: 100px;
}


.main-image {
  width: 100%;
  height: 100vh; /* remove this*/
  /* responsive */
  background-image: url("http://afreshstartmovingco.com/wp-content/uploads/2019/01/hd-wallpapers-1920x1080-nature-1-1568x882.jpg");
  background-size: cover;
  background-position: 0% 100%;
}


.page-footer {
  background-color: #343a40;
  color: white;
  padding: 30px 30px 30px 30px;
  position: relative;
  bottom: 0;
  width: 100%;
  /* min-height:10vh; */
}




/*在这里换车*/
/*在这里换车*/
一些文本


一些



    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>



更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本



    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>



这是页脚


    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>


/*在这里换车*/
html，
身体{
最小高度：100%；
身高：100%；
}
.mt-100{
边缘顶部：100px；
}
.主图像{
宽度：100%；
高度：100vh；/*取下此*/
/*响应的*/
背景图像：url（“http://afreshstartmovingco.com/wp-content/uploads/2019/01/hd-wallpapers-1920x1080-nature-1-1568x882.jpg");
背景尺寸：封面；
背景位置：0%100%；
}
.页脚{
背景色：#343a40；
颜色：白色；
填充：30px 30px 30px 30px；
位置：相对位置；
底部：0；
宽度：100%；
/*最小高度：10vh*/
}



谢谢你的回答。请阅读代码或检查小提琴示例。已经是
位置：相对
@saitam在我的屏幕上页脚已经正确地位于底部，根据屏幕的不同，您可能希望更改
显示属性

    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>