css - Bootstrap 容器获取 margin-top 0

标签 css twitter-bootstrap

为什么我的 .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>

最佳答案

这是因为您在导航栏中使用了 navbar-fixed-top 类。这是一个 Bootstrap 类,它使您的导航栏 position: fixed 在 CSS 中。因此,您必须将 margin-toppadding-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.

关于css - Bootstrap 容器获取 margin-top 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43167302/

相关文章:

css - SASS 新手 - 未编译

html - 我应该开始使用 HTML5 和 CSS3 并避免使用以前的版本吗?

html - 在顶部图像上居中垂直图像

html - bootstrap 示例是有效的 HTML

asp.net-mvc - 带有字形图标和不同字体文本的 ASP.NET Actionlink

jquery - 在 CSS 中创建垂直对齐的图库时出现问题

javascript - 寻找有关如何在鼠标突出显示链接时显示信息警报的选项

html - 如何将标签放在同一行

javascript - 如何在 HTML 中添加单个 Twitter feed?

javascript - 如何在 JavaScript 中插入 MySQL 值?