如何使用Bootstrap 3实现此布局

Question

我想知道是否有人知道如何使用Bootstrap 3完成此操作而不是黑客攻击。

从下图中我可以看到，我想在顶部有一个倒置的导航栏。在下面我想要一个黑色的bg只能到目前为止（例如4个深色bg的列，其余8个带有浅色bg的列）。这很容易。我发现的问题是容器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，但我认为这非常hackish和不优雅。

有关如何实现这一目标的任何建议吗？

Answer 1

好的......如果我有这个权利，那么有问题的元素就有.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%;
} 

Codepen Example

CSS-Tricks Reference