css Bootstrap 5 footer没有响应

9nvpjoqh  于 2023-08-09  发布在  Bootstrap
关注(0)|答案(1)|浏览(116)

我正在创建一个网站与bootstrap 5，HTML和CSS。我注意到，当我缩小屏幕的大小时，页脚中的列没有对齐。当屏幕是手机大小和桌面大小时，页脚中的列对齐，但当屏幕是平板电脑大小和笔记本电脑大小时，页脚中的列不对齐。

这是平板电脑大小的屏幕的样子

桌面大小的屏幕是这样的

测试. html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </title>

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />

<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-Technovine/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  </head>
  <body>
    
    

    <!-- FOOTER SECTION START -->
    <footer class="bg-dark text-white " id="footer">
      <div class="container">
        <div class="row mb-2">
          <div class="col-md-3 mt-5">
            <h4>About Us</h4>
            <hr />
            <p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.

            </p>
            <!-- FACEBOOK SECTION -->
            <a href="https://www.facebook.com/TechnovineSolutions">
              <i class="fa-brands fa-facebook fa-2x"></i>
            </a>

            <!-- INSTAGRAM SECTION  -->
            <a href="https://www.instagram.com/technovinesolutions/">
              <i class="fa-brands fa-instagram fa-2x"></i>
            
            
            </a>

            <!-- TWITTER SECTION -->
            <a href="https://twitter.com/TechnovineSolut">
              <i class="fa-brands fa-twitter fa-2x"></i>
              
            <!-- LINKEDIN SECTION -->
            </a>
            <!-- <a href="#">
              <i class="fa-brands fa-linkedin fa-2x"></i>
            </a> -->

            <!-- WHATSAPP SECTION -->
            <!-- <a href="#">
              <i class="fa-brands fa-whatsapp fa-2x"></i>
            </a> -->
              
          </div>
          <div class="col-md-3 mt-5">
            <h4>Quick Links</h4>
            <hr />
            <ul class="navbar-nav">
              <li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
              <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
              <li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
              <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
            </ul>
          </div>
          
          <div class="col-md-3 mt-5">
            <h4>Privacy and Terms</h4>
            <hr />
            <ul class="navbar-nav">
              <li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Terms & Coniditions</a></li>
              <li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
            </ul>
          </div>
          <div class="col-md-3 mt-5">
            <h4>Contact Info</h4>
            <hr />
            <p class="text-white">
              City, State 12345 <br />
              Call Us Now 123-456-7890 <br />
              example@email.com
            </p>
          </div>
        </div>
      </div>
      <div class="bg-dark text-white text-center py-4" id="copyright">
        Copyright &copy; 2023 . All Rights Reserved.
      </div>
    </footer>
    <!-- FOOTER SECTION CLOSE -->
  </body>
</html>

字符串

测试. css

:root {
--desktop: 1200px;
--laptop: 992px;
--tablet: 768px;
--mobile: 576px;
}

footer a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}

footer a  i {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
    color:white;
}

#footer {
    color: hsl(0, 0%, 100%);
}

#copyright {
    border-top: 1px solid hsl(0, 0%, 20%) ;
}

/* SMALL MEDIA QUERY */
@media screen and (min-width: var(--mobile)) and (max-width: var(--tablet)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}
/* MEDIUM MEDIA QUERY */
@media screen and (min-width: var(--tablet)) and (max-width: var(--laptop)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}
/* LARGE MEDIA QUERY */
@media screen and (min-width: var(--laptop)) and (max-width: var(--desktop)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}

型

:root {
--desktop: 1200px;
--laptop: 992px;
--tablet: 768px;
--mobile: 576px;
}

footer a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}

footer a  i {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
    color:white;
}

#footer {
    color: hsl(0, 0%, 100%);
}

#copyright {
    border-top: 1px solid hsl(0, 0%, 20%) ;
}

/* SMALL MEDIA QUERY */
@media screen and (min-width: var(--mobile)) and (max-width: var(--tablet)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}
/* MEDIUM MEDIA QUERY */
@media screen and (min-width: var(--tablet)) and (max-width: var(--laptop)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}
/* LARGE MEDIA QUERY */
@media screen and (min-width: var(--laptop)) and (max-width: var(--desktop)) {
    .nav-link::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .nav-link:hover::after {
        opacity: 1;
    }

    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

        .dropdown-item:hover {
            background-color: hsl(210, 55%, 41%);
        }
    }

    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </title>

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/index.css" />

<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-Technovine/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  </head>
  <body>
    
    

    <!-- FOOTER SECTION START -->
    <footer class="bg-dark text-white " id="footer">
      <div class="container">
        <div class="row mb-2">
          <div class="col-md-3 mt-5">
            <h4>About Us</h4>
            <hr />
            <p>We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.

            </p>
            <!-- FACEBOOK SECTION -->
            <a href="https://www.facebook.com/TechnovineSolutions">
              <i class="fa-brands fa-facebook fa-2x"></i>
            </a>

            <!-- INSTAGRAM SECTION  -->
            <a href="https://www.instagram.com/technovinesolutions/">
              <i class="fa-brands fa-instagram fa-2x"></i>
            
            
            </a>

            <!-- TWITTER SECTION -->
            <a href="https://twitter.com/TechnovineSolut">
              <i class="fa-brands fa-twitter fa-2x"></i>
              
            <!-- LINKEDIN SECTION -->
            </a>
            <!-- <a href="#">
              <i class="fa-brands fa-linkedin fa-2x"></i>
            </a> -->

            <!-- WHATSAPP SECTION -->
            <!-- <a href="#">
              <i class="fa-brands fa-whatsapp fa-2x"></i>
            </a> -->
              
          </div>
          <div class="col-md-3 mt-5">
            <h4>Quick Links</h4>
            <hr />
            <ul class="navbar-nav">
              <li class="nav-item"><a href="/index.html" class="nav-link">Home</a></li>
              <li class="nav-item"><a href="/about.html" class="nav-link">About</a></li>
              <li class="nav-item"><a href="/services.html" class="nav-link">Services</a> </li>
              <li class="nav-item"><a href="/contact.html" class="nav-link">Contact</a> </li>
            </ul>
          </div>
          
          <div class="col-md-3 mt-5">
            <h4>Privacy and Terms</h4>
            <hr />
            <ul class="navbar-nav">
              <li class="nav-item"><a href="#" class="nav-link">Privacy Policy</a></li>
              <li class="nav-item"><a href="#" class="nav-link">Terms & Coniditions</a></li>
              <li class="nav-item"><a href="#" class="nav-link">API Documentation</a> </li>
            </ul>
          </div>
          <div class="col-md-3 mt-5">
            <h4>Contact Info</h4>
            <hr />
            <p class="text-white">
              City, State 12345 <br />
              Call Us Now 123-456-7890 <br />
              example@email.com
            </p>
          </div>
        </div>
      </div>
      <div class="bg-dark text-white text-center py-4" id="copyright">
        Copyright &copy; 2023 . All Rights Reserved.
      </div>
    </footer>
    <!-- FOOTER SECTION CLOSE -->
  </body>
</html>

的字符串

css

1条答案

按热度按时间
h79rfbju

h79rfbju1#

因此，问题是您的“隐私和条款”标题在某些屏幕宽度上会出现两行。
这里有几个选择。
(1)您可以将标题变小，这样它就不会换行：
https://codepen.io/panchroma/pen/rNQRZQj
下面是从第157行开始的新CSS

@media screen and (min-width: 768px) and (max-width: 991px) {
  footer h4 {
    font-size: 1rem !important;
  }
}

字符串
或者是
(2)您可以保持标题的字体大小不变，但增加所有标题的高度，使它们相当于2行高
https://codepen.io/panchroma/pen/eYQXxmW的

@media screen and (min-width: 768px) and (max-width: 991px) {
  footer h4 {
    min-height: 56px;
  }
}

型
在这两个示例中，在CSS的第158行，我在第1列和第4列的段落中添加了一点顶部填充，以便所有4个页脚列中的内容对齐

赞(0）分享  回复(0）举报  2023-08-09
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com