Question

我想要某种类似于关闭特定标签的功能。我需要能够为流动空间的背景着色，但它与一堆div混合在一起。我该怎么做呢？显然关闭它所在的横幅div会使行/列混乱，但我不确定我应该怎么做。

我嘲笑了一幅非常粗略的画作，试图更好地解释一下。

黑线上方的空白区域应为灰色。如果侧边栏不在那里，这一切都会非常简单。我目前正在使用Bootstrap 3.0框架进行响应式设计。否则我只会让侧边栏绝对定位，那就是那个。

那么如何在保持移动友好布局的同时做到这一点呢？

<%--<div class="greyBanner">--%>
<div class="container" style="margin-top: 50px;">
    <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-8">
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>

            <div class="row">
                <div class="col-lg-12">
                    <h1>Some heading</h1>
                    $PageSummary
                </div>

                <div class="1">
                    <div class="2">
                        <div class="3"></div>
                    </div>
                    <div class="4"></div>
                    <div class="5"></div>
                </div>


                <div class="col-lg-12">

                    <div class="alert alert-danger alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        Important Update:<br/>

                        <p>Message and colour changed from the CMS</p>
                    </div>
                </div>


                <div class="col-lg-12">
                    <%--$SearchForm--%>
                    <select style="width:100%" id="e2" data-placeholder="Search...">
                        <option value=""></option>
                        <% loop Doc_Resources %>
                            <option value="$Title">$Title</option>
                        <% end_loop %>
                        <% loop Doc_Forms %>
                            <option value="$Title">$Title</option>
                        <% end_loop %>
                        <% loop Doc_Policies %>
                            <option value="$Title">$Title</option>
                        <% end_loop %>
                    </select>
                </div>


                <div class="col-lg-12">

                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#pane1" data-toggle="tab">Resources</a></li>
                        <li><a href="#pane2" data-toggle="tab">Forms</a></li>
                        <li><a href="#pane3" data-toggle="tab">Policies</a></li>
                    </ul>

                </div>

                <%--</div> Close grey banner--%>

Answer 1

也许将背景分为两部分，按照您喜欢的方式为背景着色，然后在容器上浮动右侧元素而不用 overflow:hidden可能会有效。这样，正确的元素可以在其容器之外。

Rough Example Here

如何将div /行与流体背景颜色混合

1 个答案: