色带的右侧包裹不垂直对齐

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定位但是{{1 }}）：

float: right