Question

为什么我的.container main_container div挂在标题上？（这不是因为2 php错误信息，我试过）

如果我给出关于100px margin-top的div，那就没关系，但这不是一个好方法。

在标题之后，我添加了一个clearfix div，但它什么也没做。

    <nav class="navbar navbar-default navbar-fixed-top mainHeader">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php echo $host; ?>"><?php echo $siteName; ?></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <?php
        $top_menuDown = mysqli_query($kapcs, "SELECT * FROM top_menu WHERE top_menu_id IN (1,3,4,5,6,7) ORDER BY top_menu_sorrend ASC");
        if(mysqli_num_rows($top_menuDown) > 0 )
        {
            while($top_nav = mysqli_fetch_assoc($top_menuDown))
            {
                echo '<li><a class="top_menu_to_link" href="'.$host.'/'.$top_nav['top_menu_seo'].'" title="'.$top_nav['top_menu_nev'].'">'.$top_nav['top_menu_nev'].'</a></li>';
            }
        }
        ?>
      </ul>
    </div>
  </div>
</nav>
<div class="clearfix"></div>

Answer 1

这是因为您在导航栏中使用了In [233]: np.isclose(out, 0).sum() Out[233]: 12000 In [234]: (~np.isclose(out, 0)).sum() Out[234]: 3000类。这是一个Bootstrap类，可以在CSS中创建导航栏navbar-fixed-top。因此，您必须向position: fixed添加margin-top或padding-top。在这种情况下，Clearfix与您的问题无关。当您使用main_container浏览器时，将此元素从正常文档流中取出。

position: fixed

元素从文档流中移除，其他元素的行为就像它甚至不存在一样，而所有其他位置属性都可以使用它。

Answer 2

您必须对body元素使用padding-top/margin-top。原因由@makshh解释。因此，只需尝试使用Javascript基于屏幕大小自定义它。

Updated Fiddle

以下是 -

的示例

$(window).resize(function() {
  if ($(".navbar.navbar-default.navbar-fixed-top.mainHeader").height() > 100) {
    $("html, body").css("padding-top", "150px");
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Főoldal</title>


<body style="padding-top:100px;">
  <nav class="navbar navbar-default navbar-fixed-top mainHeader">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="https://kemenyem.hu">Nemzeti Reptéri Parkoló</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a class="top_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a></li>
          <li><a class="top_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a></li>
          <li><a class="top_menu_to_link" href="https://kemenyem.hu/erdekessegek" title="Hírek, érdekességek">Hírek, érdekességek</a></li>
          <li><a class="top_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a></li>
          <li><a class="top_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a></li>
          <li><a class="top_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="clearfix"></div>
  <div class="container main_container">
    <div class="homepage_slideshow hidden-xs">
      <div class="home-slider-wrapper hidden-xs">
        <ul class="bxslider">
          <li><img src="https://kemenyem.hu/images/homepage_slideshow/93-3.jpg" title="Teszt kép 1" alt="Teszt kép 1" /></li>
          <li><img src="https://kemenyem.hu/images/homepage_slideshow/393-1.jpg" title="Teszt kép 2" alt="Teszt kép 2" /></li>
        </ul>
      </div>
    </div>
    <!--Slider end-->
    <div class="col-md-9 left_side">
      <div class="left_title_div">
        <h3 class="left_title">Parkolóhely foglalás online</h3>
      </div>
      <div class="content">
        <h3><strong>A megrendel&eacute;s, &aacute;raj&aacute;nlatk&eacute;r&eacute;s&nbsp;menete</strong></h3>

        <p>Amennyiben &aacute;raj&aacute;nlatot szeretne k&eacute;rni, azt a term&eacute;kekn&eacute;l a &quot;M&eacute;g jobb &aacute;rat szeretn&eacute;k&quot; gombra, vagy a men&uuml;ben az &quot;Aj&aacute;nlatk&eacute;r&eacute;s&quot; men&uuml;pontra
          val&oacute; kattint&aacute;ssal&nbsp;teheti meg.</p>

        <p>A megjelenő aj&aacute;nlatk&eacute;rő ablakban / oldalon k&eacute;rj&uuml;k t&ouml;ltse ki az &ouml;sszes mezőt, &eacute;s k&uuml;ldje el r&eacute;sz&uuml;nkre.</p>

        <p>Munkat&aacute;rsaink 2 munkanapon bel&uuml;l felveszik &Ouml;nnel a kapcsolatot az &Ouml;n &aacute;ltal megadott el&eacute;rhetős&eacute;gek valamelyik&eacute;n.</p>

        <h3><strong>Fizet&eacute;s</strong></h3>

        <p>Megrendel&eacute;s&eacute;t előre utal&aacute;ssal, vagy szem&eacute;lyesen valamelyik telephely&uuml;nk&ouml;n k&eacute;szp&eacute;nzzel tudja fizetni. A budapesti telephely&uuml;nk&ouml;n lehetős&eacute;g van bankk&aacute;rty&aacute;s fizet&eacute;sre
          is.</p>

        <h3><strong>Sz&aacute;ll&iacute;t&aacute;s</strong></h3>

        <p>A r&eacute;szletes sz&aacute;ll&iacute;t&aacute;si inform&aacute;ci&oacute;kat megtekintheti a &quot;Sz&aacute;ll&iacute;t&aacute;s&quot; men&uuml;pontban.</p>

        <h3><strong>&Aacute;rak</strong></h3>

        <p>A weboldalon felt&uuml;ntetett &aacute;rak gy&aacute;ri &aacute;rak, tartalmazz&aacute;k a 27% &Aacute;F&Aacute;-t, de nem tartalmazz&aacute;k a raklapok d&iacute;j&aacute;t, a sz&aacute;ll&iacute;t&aacute;st, &eacute;s a lerak&aacute;st.</p>
      </div>


      <div class="left_title_div">
        <h3 class="left_title">Legfrissebb hírek</h3>
      </div>
      <div class="news_box news_list">
        <div class="row main_hir_box">
          <div class="col-md-3 main_hir_box_thumb_div">
            <a href="https://kemenyem.hu/hir/13/jobb-lett-az" title="Jobb lett az instant futtatás az új Android Studio 2.3-ban" class="main_hir_img_link"><img src="https://kemenyem.hu/images/news/th_remy-metailler-hafjell_147-82712.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Jobb lett az instant futtatás az új Android Studio 2.3-ban"></a>
          </div>
          <div class="col-md-9 main_hir_box_data_div">
            <h2 class="main_hir_title_list"><a href="https://kemenyem.hu/hir/13/jobb-lett-az" title="Jobb lett az instant futtatás az új Android Studio 2.3-ban" class="main_hir_title_link_list">Jobb lett az instant futtatás az új Android Studio 2.3-ban</a></h2>
            <span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
            <p class="main_hir_box_desc">A Google a napokban új kiadást jelentett be integrált mobilos fejlesztőkörnyezetéből. Az új Android Studio 2.3 sok stabilitási fejlesztés mellett néhány érdekes funkcionális fejlesztést is hoz, amik az app-ok tervezését, tesztelését és a bennük
              történő hibakeresést egyaránt segítik majd.</p>
          </div>
        </div>
        <div class="row main_hir_box">
          <div class="col-md-3 main_hir_box_thumb_div">
            <a href="https://kemenyem.hu/hir/12/igy-fejleszthetsz-egy-php-sql-alkalmazast-git-tel-az-azure-ba" title="Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2" class="main_hir_img_link"><img src="https://kemenyem.hu/images/news/thumb_ne-style-001-2532861600.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2"></a>
          </div>
          <div class="col-md-9 main_hir_box_data_div">
            <h2 class="main_hir_title_list"><a href="https://kemenyem.hu/hir/12/igy-fejleszthetsz-egy-php-sql-alkalmazast-git-tel-az-azure-ba" title="Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2" class="main_hir_title_link_list">Így fejleszthetsz egy PHP-SQL alkalmazást Git-tel az Azure-ba 2</a></h2>
            <span class="main_hir_box_date">HÍREK | 2017-03-15 16:27</span>
            <p class="main_hir_box_desc">A bemutató feltételezi, hogy a gépeden már fel van telepítve a PHP, az SQL Server Express kiadása, valamint a Microsoft SQL Server meghajtói a PHP-hez és a Git verziókezelő is. A cikk során a következőket fogjuk megtanulni:</p>
          </div>
        </div>
        <div class="row main_hir_box">
          <div class="col-md-3 main_hir_box_thumb_div">
            <a href="https://kemenyem.hu/hir/11/oriasposzteren-mutatja-be-a-visual-studio-2017-ujdonsagait-a-microsoft" title="Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft" class="main_hir_img_link"><img src="https://kemenyem.hu/images/news/th_s1600_0815_km_01-12894.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft"></a>
          </div>
          <div class="col-md-9 main_hir_box_data_div">
            <h2 class="main_hir_title_list"><a href="https://kemenyem.hu/hir/11/oriasposzteren-mutatja-be-a-visual-studio-2017-ujdonsagait-a-microsoft" title="Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft" class="main_hir_title_link_list">Óriásposzteren mutatja be a Visual Studio 2017 újdonságait a Microsoft</a></h2>
            <span class="main_hir_box_date">HÍREK | 2017-03-15 16:25</span>
            <p class="main_hir_box_desc">A Microsoft a hét elején Visual Studio blogjában egy olyan, általa poszternek hívott dokumentumot tett közzé, amelyben múlt héten bemutatott új integrált fejlesztői környezete legfontosabb újdonságait mutatja be. A máshol csak infografikának
              hívott összeállításban az általános, produktivitást javító fejlesztések mellett unit-tesztelést segítő újdonságok, sőt, a C++, a C# és az ASP.NET újdonságai is említésre kerülnek.</p>
          </div>
        </div>
        <div class="row main_hir_box">
          <div class="col-md-3 main_hir_box_thumb_div">
            <a href="https://kemenyem.hu/hir/10/uj-korszakot-nyit-a-most-elkeszult-llvm-es-a-clang-4-0" title="Új korszakot nyit a most elkészült LLVM és a Clang 4.0" class="main_hir_img_link"><img src="https://kemenyem.hu/images/news/th_p-dsc04186-81966.jpg" class="img-responsive main_hir_img imageHoverOpacity" alt="Új korszakot nyit a most elkészült LLVM és a Clang 4.0"></a>
          </div>
          <div class="col-md-9 main_hir_box_data_div">
            <h2 class="main_hir_title_list"><a href="https://kemenyem.hu/hir/10/uj-korszakot-nyit-a-most-elkeszult-llvm-es-a-clang-4-0" title="Új korszakot nyit a most elkészült LLVM és a Clang 4.0" class="main_hir_title_link_list">Új korszakot nyit a most elkészült LLVM és a Clang 4.0</a></h2>
            <span class="main_hir_box_date">HÍREK | 2017-03-15 16:24</span>
            <p class="main_hir_box_desc">Az LLVM fejlesztői a napokban &quot;final&quot; jelöléssel látták el az LLVM és a Clang következő, 4-es verzióját. Bár a hivatalos bejelentés és a csomagok közzétételére vélhetően csak ezen a héten kerül majd sor, a fordító-infrastruktúra
              és a hozzá kapcsolódó C/C++ fordító legújabb kiadása ezzel elkészültnek tekinthető.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3 right_side">
      <div class="left_title_div">
        <h3 class="left_title">Hírlevél</h3>
      </div>
      <div class="sidebar_data_div">
        <div class="sidebar_data">
          <p class="sidebar_text">Iratkozzon fel hírlevelünkre, hogy mindíg értesüljön az újdonsgokról, friss hírekről.</p>
          <form action="files/newsletter.php" method="post" id="SidebarNewsletterForm">
            <input type="text" id="newsletterName" name="NewsletterName" placeholder="Az Ön neve" class="form-control sidebar_input">
            <input type="text" id="NewsletterEmail" name="NewsletterEmail" placeholder="E-mail címe" class="form-control sidebar_input">
            <button type="button" id="NewsletterButton" name="NewsletterButton" class="sidebar_button"><i class="fa fa-envelope-o" aria-hidden="true"></i> Feliratkozás</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <footer class="footer-basic-centered">
    <p class="footer-links">
      <a class="footer_menu_to_link" href="https://kemenyem.hu/" title="Kezdőlap">Kezdőlap</a><a class="footer_menu_to_link" href="https://kemenyem.hu/informaciok" title="Információk">Információk</a><a class="footer_menu_to_link" href="https://kemenyem.hu/erdekessegek"
        title="Hírek, érdekességek">Hírek, érdekességek</a><a class="footer_menu_to_link" href="https://kemenyem.hu/kapcsolat" title="Kapcsolat">Kapcsolat</a><a class="footer_menu_to_link" href="https://kemenyem.hu/arlista" title="Árlista">Árlista</a>
      <a
        class="footer_menu_to_link" href="https://kemenyem.hu/galeria" title="Galéria">Galéria</a>
    </p>
    <p class="footer-company-name">2017 <br />
      <b>Notice</b>: Undefined index: k_nev in <b>/home/grashu/public_html/kemenyem.hu/files/footer.php</b> on line <b>15</b><br /> &copy; - Minden jog fentartva!</p>
  </footer>
  <div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Bezárás</span></button>
          <h4 class="modal-title" id="myModalLabel">Értesítés</h4>
        </div>
        <div class="modal-body">
          <p id="newsletterResult"></p>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="scrollToTop" title="Oldal tetejére"><i class="fa fa-chevron-up scrollToTopIcon" aria-hidden="true"></i></a></body>

希望这有帮助！

Bootstrap容器获得margin-top 0

2 个答案: