html - div重叠-流体/ Bootstrap

Question

我正在对这个站点进行一些样式调整 http://neondataskills.org/

我添加了一个顶部栏图像，现在，当您调整页面大小时，顶部栏图形如果太宽就会与导航重叠。我想强制图像将导航栏向下推。

HTML 看起来像这样:

<div class="navigation-wrapper">
<div class="NEON-header">
<img src="/images/banners/header_whole.png" alt="NEON" style="width:100%;">
</div>
    <div class="site-name">
        <a href="{{ site.url }}">{{ site.title }}</a>
    </div><!-- /.site-name -->
    <div class="top-navigation">
        <nav role="navigation" id="site-nav" class="nav">
            <ul>
                {% for link in site.links %}
                <li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
                {% endfor %}
            </ul>
        </nav>
    </div><!-- /.top-navigation -->
</div><!-- /.navigation-wrapper -->

目前，当您使页面变宽时，站点名称和顶部导航 div 会被 NEON 标题 div“覆盖”。我在堆栈中发现了一些代码，提示我需要在我的 css 中使用“after”元素，但这似乎也不起作用。

CSS:

.NEON-header {
    background-color: #1ea0c1;
    height: 0;
    margin: 0 0 10em;
    padding: 0;
}

/* this could potentially force the div to clear but it doesn't */
.NEON-header:before, .NEON-header:after {
    display: table;
    line-height: 0;
    content: ""
}
.NEON-header:after {
    clear: both;
}

.navigation-wrapper::before, .navigation-wrapper::after {
    content: "";
    display: table;
    line-height: 0;
}
.navigation-wrapper::after {
    clear:both;
}

.site-name {
    display: inline;
    float: left;
    font-size: 1.2rem;
    margin-left: 4.16667%;
    margin-right: 4.16667%;
    padding: 1em 0 0;
    width: 16.6667%;
}

.top-navigation {
    display: inline;
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding: 1em 0 0;
    width: 75%;
}

还有什么我可以尝试强制 div 在彼此上方和下方堆叠而不是让顶部 div 重叠到导航栏中的想法吗？非常感谢任何想法利亚

Answer 1

问题是您的 .NEON-header 的高度为 0px，并且您的图像尺寸正在增大。只需从 .NEON-header 中删除 height: 0;。示例:

.NEON-header {
  background-color: #1ea0c1;
  margin-bottom: 30px;
}