Раскрась бутстрап нижнего колонтитула, чтобы сделать его отзывчивым - PullRequest
Новая
       41

Раскрась бутстрап нижнего колонтитула, чтобы сделать его отзывчивым

0 голосов
/ 15 мая 2018

Как вы можете видеть, на больших, средних и маленьких экранах нижний колонтитул имеет правильный цвет фона по умолчанию (благодаря классу 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>

1 Ответ

0 голосов
/ 15 мая 2018

В вашем 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" и импортировать css Bootstrap из CDN , например: 

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