0

我想要某种类似于关闭特定标签的功能。我需要能够为流动空间的背景着色，但它与一堆 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--%>
4

1 回答 1

0

也许将背景分成两部分，根据需要为背景着色，然后在容器上不浮动正确的元素可能会起作用。 overflow:hidden这样，正确的元素就可以脱离其容器。

粗略的例子在这里

于 2013-09-13T13:12:34.450 回答