css - Bootstrap 容器获取 margin-top 0

Question

为什么我的 .container main_container div 卡在标题上？ (不是因为2 php报错信息，我试过了)

如果我给 div 100px margin-top，它会没问题，但这不是一个好方法。

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

Fiddle

    <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

这是因为您在导航栏中使用了 navbar-fixed-top 类。这是一个 Bootstrap 类，它使您的导航栏 position: fixed 在 CSS 中。因此，您必须将 margin-top 或 padding-top 添加到您的 main_container。在这种情况下，Clearfix 与您的问题无关。当您使用 position: fixed 浏览器时，将此元素从正常文档流中移出。

position:absolute/固定:

The element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.