css - 色带的右侧包装未垂直对齐

Question

我正在尝试使用 Bootstrap 和我自己的 CSS 作品为导航栏制作功能区。我已经完成了我需要的大部分内容，但是我似乎无法使功能区的右侧与导航栏对齐。

(故意使用不好的颜色以使示例明显)

这是我的情况的一个例子:JSBin example

CSS:

nav.navbar {
    border-radius: 0px;
    border-left: none;
    border-right: none;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 5px -5px rgba(0, 0, 0, 0.075);
    box-shadow: none;
}

div.ribbon-left {
    left: -13px;
    float: left;
    width: 13px;
    border-right: none;
}

div.ribbon-right {
    width: 13px;
    float: right;
    right: -13px;
    border-left: none;
}

div.ribbon-left, div.ribbon-right {
    position: relative;
    /*background: linear-gradient(to bottom, #fff 0, #f8f8f8 100%) repeat-x;*/
    background: white;
    height: 100%;
    min-height: 52px;
    border: 1px solid transparent;
}

div.ribbon-top-back {
    z-index: -10;
    border-color: transparent transparent #f0f0f0 transparent;
    border-style: solid;
    border-width: 13px;
    height: 0px;
    width: 0px;
    position: relative;
    left: -1px;
    top: -27px;
}

div.ribbon-right > div.ribbon-top-back {
    left: -14px;
}

/* Temporary coloring to make things obvious */
body {
    background-color: blueviolet;
}

.container {
    background-color: #c0a16b;
}

html, body, div.container {
  height: 100%;
}

功能区布局的总体思路:

<div class="row">
    <div class="ribbon">
        <div class="ribbon-left">
            <div class="ribbon-top-back"></div>
        </div>
        <div class="ribbon-content">
            <!-- bootstrap navbar -->
        </div>
        <div class="ribbon-right">
            <div class="ribbon-top-back"></div>
        </div>
    </div>
</div>

如何使元素正确对齐？

Answer 1

所以经过一些测试，很明显，如果我希望元素是内联的，我需要在导航栏之前声明它(因为它是 relative 定位但 float : 对):

<div class="row">
    <div class="ribbon">
        <div class="ribbon-left">
            <div class="ribbon-top-back"></div>
        </div>
        <div class="ribbon-right">
            <div class="ribbon-top-back"></div>
        </div>
        <div class="ribbon-content">
            <!-- bootstrap navbar -->
        </div>
    </div>
</div>