个人中心
gpt4 book ai didi

html - 为页脚 Bootstrap 着色以使其响应

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

如您所见，在大、中和小屏幕上，页脚具有正确的背景默认颜色(由于 panel_footer 类)，但是一旦三个部分相互堆叠，您就可以看到部分页脚是彩色的与页面的背景颜色。如何以统一颜色的方式设置页脚样式？

这里是代码:

  body {
  background-color: #d4f9f7;
  font-family: 'Raleway', sans-serif;
}

#logoheader {
  background: url('../images/logosmall.jpg') no-repeat;
  width: 170px;
  height: 170px;
  margin-left: 30px;
}

#generalmenu {
  margin-top: 110px;
  font-size: 1.8em;
}

#navlist {
  font-size: 1.6em;
  background-color: #d4f9f7;
}

#mainpage {
  background: url('../images/prague_exper.jpg') no-repeat;
  background-size: cover;
  height: 50vw;
  box-shadow: 0 0 50px #ffff;
  border: 2px solid #ffff;
}


/* Get on Board + Learning & Development Consultancy */

#intestazione {
  text-align: center;
}


/* Get on Board */

#maintitle {
  color: #ffffff;
  font-size: 8vw;
  text-shadow: 1px 1px 1px #222;
}


/* Learning & Development Consultancy */

#subtitle {
  font-size: 2vw;
  text-shadow: 1px 1px 1px #222;
  color: #ffffff;
}

#footer {
  height: 200px;
}


/*Media Queries*/

@media (max-width: 768px) {
  #subtitle {
    visibility: hidden;
  }
  #logoheader {
    background: url('../images/logoxs.jpg') no-repeat;
    margin-left: 120px;
  }
  #mainheader {
    height: 120px;
  }
  #navlist {
    font-size: 1.1em;
    background-color: #d4f9f7;
  }
  #mainpage {
    margin-top: 60px;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\bootstrap.min.css">
  <link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\banco prova css.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>

  <header>
    <nav id="mainheader" class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a id="logoheader" class="navbar-brand" href="#"></a>
        </div>

        <!-- general menu for all devices except xs ones -->
        <ul id="generalmenu" class="nav navbar-nav navbar-right visible-lg visible-md visible-sm">
          <li><a href="#"><b>Home</b></a></li>
          <li><a href="#"><b>Servizi</b></a></li>
          <li><a href="#"><b>Contattaci</b></a></li>
          <li><a href="#"><b>Referenze</b></a></li>
        </ul>

        <!-- Menu on the right -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul id="navlist" class="nav navbar-nav hidden visible-xs">
            <li><a href="#"><b>Home</b></a></li>
            <li><a href="#"><b>Servizi</b></a></li>
            <li><a href="#"><b>Contattaci</b></a></li>
            <li><a href="#"><b>Referenze</b></a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <!-- jumbotron AkA Prague image and main Get On Board write -->
  <div id="mainpage" class="jumbotron img-responsive">
    <div id="intestazione">
      <h1 id="maintitle" class="display-3">Get On Board</h1>
      <p id="subtitle">Learning & Development Consultancy</p>
    </div>
  </div>

  <!--Footer-->
  <footer class="panel-footer">
    <div id="footer" class="container">
      <div class="row">
        <section id="hours" class="col-sm-4">
          <span>Hours:</span><br> Sun-Thurs: 11:15am - 10:00pm<br> Fri: 11:15am - 2:30pm<br> Saturday Closed
          <hr class="visible-xs">
        </section>
        <section id="address" class="col-sm-4">
          <span>Address:</span><br> 7105 Reisterstown Road<br> Baltimore, MD 21215
          <p>* Delivery area within 3-4 miles, with minimum order of $20 plus $3 charge for all deliveries.</p>
          <hr class="visible-xs">
        </section>
        <section id="testimonials" class="col-sm-4">
          <p>"The best Chinese restaurant I've been to! And that's saying a lot, since I've been to many!"</p>
          <p>"Amazing food! Great service! Couldn't ask for more! I'll be back again and again!"</p>
        </section>
      </div>
    </div>
  </footer>


</body>

最佳答案

在您的 CSS 中，移除页脚的高度:

#footer {
  height:200px;
}

像您一样定义此高度将调整默认的 Bootstrap 在列堆叠上的行为。如果您想保留此属性，请在更大的设备上，在它们各自的媒体查询上定义它。

例如:

@media (max-width: 768px) {
  #footer {
    height: 200px;
  }
}

这是 Working Fiddle 的链接.

PS(与问题无关):您正在导入您的 css 文件: 

<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\bootstrap.min.css">
<link rel="stylesheet" href="C:\Users\Gianpa\Desktop\banco di prova coding\sito prova\css\banco prova css.css">

我建议将“banco prova css.css”重命名为“banco_prova_css.css”，并从 CDN 导入 Bootstrap 的 css。 ，例如:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

关于html - 为页脚 Bootstrap 着色以使其响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50357434/

25 4 0
文章推荐： c++ - 在 OpenCV (C++) 中打印多维垫
文章推荐： css - Angular 引导 css : Force Last Column In a Row To Fill Remaining Empty Space
文章推荐： c++ - CMAKE AIX xlc 编译器未被使用
文章推荐： Javascript/jQuery 弹出循环并添加
行者123
个人简介

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

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