个人中心
gpt4 book ai didi

html - 如何使用 Bootstrap 4 和/或 flex 将内容居中并设置页脚？

转载 作者：行者123 更新时间：2023-11-28 01:10:16 25 4
gpt4 key购买 nike

请看下面的代码。我只想将内容与出现在底部的页脚居中，所有这些都在背景封面图像中。我试过用 Bootstrap4 容器和 d-flex 配置来做这件事，所有这些都是一个糟糕的失败。 :(

目前我使用的是两列堆叠在一起，但是当你把屏幕的高度变小时它就不起作用了。我希望通过使用整个屏幕实际居中内容同时保持页脚的正确方法来做到这一点。

另请参阅此处的工作演示:https://jsfiddle.net/m05heusn/ 

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta http-equiv="x-ua-compatible" content="ie=edge">

      <title>t-rex</title>

      <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">

      <!-- bootstrap4 css should load first to be available globally -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">

      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" integrity="sha384-vGq6VlJ/rGDK5hwCZhgtrb5j4nOanwgWgBSe9anrJGQHqCgkBo45u6lAxlVR0U+Q"
        crossorigin="anonymous"></script>

      <style>
        html,
        body {
          font-family: 'Josefin Sans', sans-serif;
          height: 100%;
        }

        #cover {
          background-attachment: scroll;
          background-image: url('http://source.unsplash.com/9euUL1nE9aA/1920x1080');
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
      </style>

      <script async src="https://www.googletagmanager.com/gtag/js?id=xyz"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'xyz');
      </script>
    </head>

    <body>
      <nav class="navbar navbar-expand-sm navbar-light bg-light afixed-top py-4">
        <div class="container">
          <a class="navbar-brand" href="#">
            t-rex
          </a>

          <button class="navbar-toggler" data-toggle="collapse" data-target="#navMenu">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navMenu">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>
            </ul>
          </div> <!-- navMenu -->
        </div> <!-- container -->
      </nav>

      <div id="cover" class="h-100">

        <div class="container-fluid h-100">
          <div class="row h-100 text-center">
            <div class="col-12 align-self-center text-center">
              <div class="display-1 d-none d-sm-block">
                t-rex
              </div>

              <div class="display-3 d-block d-sm-none">
                t-rex
              </div>
            </div>

            <div class="col-12 align-self-end p-2">
              <div class="d-none d-sm-block text-right">
                Copyright &copy; 2018 t-rex. All rights reserved.
              </div>

              <div class="small d-block d-sm-none text-center">
                Copyright &copy; 2018 t-rex. All rights reserved.
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- cover


      <script src="https://code.jquery.com/jquery-3.3.1.min.js " integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT "
        crossorigin="anonymous "></script>

      <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo "
        crossorigin="anonymous "></script> -->

      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js " integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49 "
        crossorigin="anonymous "></script>

      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js " integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy "
        crossorigin="anonymous "></script>
    </body>

    </html>

最佳答案

在此代码块中有“text-right”类:

<div class="d-none d-sm-block text-right">Copyright &copy; 2018 t-rex. All rights reserved.</div>

因此，将其更改为“text-center”。

关于html - 如何使用 Bootstrap 4 和/或 flex 将内容居中并设置页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52142259/

25 4 0
文章推荐： javascript - 无法使用 Jquery 将 HTML 附加到列表
文章推荐： c++ - 模板中的名称解析和实例化点
文章推荐： C++ - QSettings 问题
文章推荐： javascript - 使用 inner.HTML 添加淡入淡出效果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com