Poprawny sposób dodawania wypełnienia do ciała Bootstrap, aby zapobiec nakładaniu się treści i nagłówka

Rozumiem, że aby główny kontener w Bootstrap nie był na górze ciała, a za paskiem nawigacyjnym, musisz dodać padding w ten sposób: 

<link href="css/bootstrap.css" rel="stylesheet">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

Wyściółka musi być zadeklarowana pomiędzy bootstrap.css i reagujący na bootstrap.css, aby wypełnienie nie powodowało problemów na mniejszych urządzeniach, a tym samym łamało responsywność strony.

Moje Pytanie: Używam combinde bootstrap.plik css wczytany z Bootstrap dostosuj , który ma responsywny i normalny css połączony w jeden plik.

Ponieważ są one połączone w jeden plik, oznacza to, że nie mogę użyć rozwiązania opisanego na początku tego pytania bez dodania poprawki do bootstrap.plik css (nie chcę go tam dodawać, długa historia).

Więc pomyślałem, zamiast wstawiać ten kod (z poprawką @ media dla mniejszych urządzeń): 

body {  padding-top: 60px; } 
@media (max-width: 979px) { body { padding-top: 0;  } }

Do mojego własnego pliku css (main.css) i włączenie go po bootstrap.css, w html, jak tak: 

<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">


Czy uważasz, że takie rozwiązanie jest dopuszczalne?

Author: Jamie Fearon, 2013-02-13
Source

2 answers

Tak, twoje rozwiązanie jest dopuszczalne.

Więc jeśli masz na początku połączony jeden lub dwa pliki Bootstrap i chcesz mieć pasek nawigacyjny, jest to sposób na uniknięcie dużego wypełnienia na mniejszych ekranach: 

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 980px) {
    body {
      padding-top: 0;
    }
  }
</style>
 43
Author: Lipis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-14 13:09:14

W Bootstrap 2.3.x możemy to naprawić za pomocą CSS: 

body > .container {
  padding-top: 40px;
  background-color: white;
}

/*
 * Responsive stypes
 */
@media (max-width: 980px) {

  body > .container {
    padding-top: 0;
  }
  .navbar-fixed-top {
    margin-bottom: 0;
  }

} /* END: @media (max-width: 980px) */

Z plikiem HTML wygląda tak 

<html>
<body>

  <div class="navbar navbar-fixed-top">
   ...
  </div>

  <div class="container">
   ...
  </div>

</body>
</html>

W pliku CSS Responsice na Twitterze górna linia menu ma class="navbar-fixed-top" z margin-bottom: 20px;, gdy szerokość ekranu jest mniejsza niż 980px.

Mam nadzieję, że to może komuś pomóc.
 3
Author: Anton Danilchenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-15 13:37:04