css - 如何使用 Bootstrap 3 实现这种布局

Question

我想知道是否有人知道我是如何使用 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，但我认为这非常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%;
} 

代码笔示例

CSS 技巧参考