如何使用 Bootstrap 3 实现这种布局答案

【问题标题】：How to achieve this layout with Bootstrap 3如何使用 Bootstrap 3 实现这种布局
【发布时间】：2013-10-11 22:34:57
【问题描述】：

我想知道是否有人知道我是如何使用 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，但我认为这非常不雅且不雅。

关于如何实现这一点的任何建议？

【问题讨论】：

所以这不是真正的布局问题..你有。更多的是关于如何让右侧位获得我想要的颜色......对吗？统计一下，我们没有你的 CSS……所以这会有所帮助。

标签： css layout twitter-bootstrap-3

【解决方案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

【讨论】：

似乎有效。不要忘记将html, body { overflow-x: hidden; } 添加到您的css 以防止水平滚动条
确实...我在示例中省略了它，但它在参考链接中。