U专家

网页最大宽为640px 且居中显示部分代码bootstrap框架 code 运维技术

admin 2024-08-22 263

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>

 

<style>
    .container {
      max-width: 640px;
      margin: 0 auto;
      /* --bs-gutter-x: none !important;  视情况而定 */
    }
    .footer-nav {  
      max-width: 640px;
      background-color: #f8f9fa;  
      padding: 20px 0;  
      position: fixed;  
      bottom: 0;  
      left: 0;  
      right: 0;  
      z-index: 1000;  
      display: flex;  
      justify-content: center;
      transform: translateX(calc(-50% + 50vw));
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      position: relative;
    }
    .content {
      flex: 1;
      margin-bottom: 80px;
    }
    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
    }
    .navbar-brand {
      display: flex;
      align-items: center;
      padding-left: 10px;
    }
    .navbar-svg {
      width: 27px;
      height: 27px;
      margin-right: 2px;
    }
  </style>

 

<!-- 导航栏 -->
<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <h3 class="navbar-brand"><img src="logo.svg" class="navbar-svg">万年日历</h3>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="/tools/time/index.php">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/tools/suiji/index.php">随机字符</a>
            </li>
            <li class="nav-item">
              <a target="_blank" class="nav-link" href="https://2220.top">有间客栈</a>
            </li>
          </ul>
        </div>
    </nav>
  </div>

 

<div class="container mt-5 custom-container">
<!-- 主内容 -->
</div>

 

<!-- 页脚 -->
<footer class="footer-nav">
    <div class="container">
      <ul class="nav justify-content-center">
        <li class="nav-item">
          <a target="_blank" class="nav-link" href="https://www.wogaosuni.com/forum-7-1.htm?tagids=5_0_0_0">Windows10</a>
        </li>
        <li class="nav-item">
          <a target="_blank" class="nav-link" href="https://www.wogaosuni.com/forum-7-1.htm?tagids=56___">Windows11</a>
        </li>
        <li class="nav-item">
          <a target="_blank" class="nav-link" href="https://www.wogaosuni.com">MSDN,我告诉你(中文站)</a>
        </li>
        <li class="nav-item">
          <a target="_blank" class="nav-link" href="https://2220.top">有间客栈</a>
        </li>
      </ul>
      <p class="text-center mt-3 mb-0">© <?php echo date("Y"); ?> 简易计算器计算器。保留所有权利。</p>
    </div>
  </footer>

 

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>

 

最新回复 (0)
全部楼主
    • MSDN,我告诉你(中文站)
      2
        登录 注册 获取赞助码
返回