1

Bootstrap 3をハッキングせずに使用してこれを達成する方法を誰かが知っているかどうか疑問に思っていました。

ここに画像の説明を入力

下の図からわかるように、上部に逆さまのナビゲーション バーが必要です。その下に、これまでのところだけ進む黒い背景のバーが必要です (たとえば、暗い背景の 4 つの列と明るい背景の残りの 8 つの列)。それは簡単な部分です。私が見つけた問題は、コンテナ bg の背景色が異なる方法です。

現時点で私はこれを持っています：

ここに画像の説明を入力

これは、次のコードを使用して達成されました。

<div class="navbar navbar-inverse navbar-fixed-top">

<div class="container nt-container">

    <div class="nt-header-top row">

        <div class="col-md-4">

            <h1 class="nt-logo">New Project</h1>

        </div>

        <div class="col-md-8 text-right">

            <h3>Some slogan here</h3>

        </div>

    </div>

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>

    </div>

    <div class="row">

        <div class="col-md-2">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                <li><a href="#about"><span class="glyphicon glyphicon-list"></span></a></li>
                <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></span></a></li>

            </ul>

        </div>

        <div class="col-md-10 nt-top-title-bar">

            <section class="row">

                <div class="col-md-8 more-padding-left">

                    <h2 class="">Some slogan here</h2>

                </div>

                <div class="col-md-4 text-right">

                    <ul class="nav navbar-nav navbar-right">

                        <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
                        <li><a href="#about"><span class="glyphicon glyphicon-list"></span></a></li>
                        <li><a href="#contact"><span class="glyphicon glyphicon-envelope"></span></a></li>

                    </ul>

                </div>

            </section>

        </div>

    </div>

</div>


<div class="container nt-container">
<div class="row">

    <section class="col-md-2 nt-side-menu-section">

        <ul class="list-group">
            ...
        </ul>

    </section>

    <div class="col-md-5 more-padding-left">

        <h2>Heading 1</h2>
        <p>...</p>

    </div>

    <div class="col-md-5">

        <h2>Heading</h2>
        <p>...</p>

    </div>

</div>

<hr>

<footer>
    <p>&copy; Company 2013</p>
</footer>

コンテナの背景の上に明るい背景を持つ右側のガターに div を追加できるかもしれませんが、これは非常にハックでエレガントではないと思いました。

これを達成する方法について何か提案はありますか?

4

1 に答える 1

4

わかりました...この権利があれば、問題の要素のクラスは.nt-top-title-bar.

以下を追加することにより、疑似要素でこれを行うことができます。

.nt-top-title-bar:after {
  content: "";
  position: absolute;
  background: insert your color here;  /* Match the background of menubar*/
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
  left: 100%;
}

コードペンの例

CSS トリックのリファレンス

于 2013-10-11T14:34:57.903 に答える