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

おそらく、背景を 2 つの部分に分割し、背景を好きなように色付けしてから、コンテナーを使わずに適切な要素をフローティングするとうまくいくかもしれません。 overflow:hiddenそうすれば、適切な要素をそのコンテナの外に出すことができます。

大まかな例はこちら

于 2013-09-13T13:12:34.450 に答える