我为标题生成了一个CSS功能区。但是当我尝试在引导程序布局中使用该代码时，功能区标题未正确放置。以下是我的HTML代码。
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div class="ribbon">
<div class="ribbon-stitches-top">
</div>
<strong class="ribbon-content"><h1>Left Ribbon</h1></strong>
<div class="ribbon-stitches-bottom">
</div>
</div>
<div class="ribbon-right">
<div class="ribbon-right-stitches-top">
</div>
<strong class="ribbon-right-content"><h1>Right Ribbon</h1></strong>
<div class="ribbon-right-stitches-bottom">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img alt="Image Preview" src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li class="disabled">
<a href="#">Messages</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
</body>
这是我的CSS代码：
.ribbon {
width: 50%;
margin-left: 10%;
top: 4%;
position: absolute;
text-align: center;
font-size: 20px!important;
background: #b4bcde;
background: -webkit-gradient(linear, left top, left bottom, from(#b4bcde), to(#706bbd));
background: -webkit-linear-gradient(top, #b4bcde, #706bbd);
background: -moz-linear-gradient(top, #b4bcde, #706bbd);
background: -ms-linear-gradient(top, #b4bcde, #706bbd);
background: -o-linear-gradient(top, #b4bcde, #706bbd);
background-image: -ms-linear-gradient(top, #b4bcde 0%, #706bbd 100%);
-webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
}
.ribbon h1 {
font-size: 24px!important;
color: #fafafa;
text-shadow: #98a7e3 0 1px 0;
margin:0px;
padding: 15px 10px;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
border-color: #677897 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbon-stitches-top {
margin-top:2px;
border-top: 0px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}
.ribbon-stitches-bottom {
margin-bottom:2px;
border-top: 0px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}
/* ribbon-right */
.ribbon-right {
width: 25%;
margin-left: 58.5%;
top: 7%;
z-index: -900;
position: absolute;
text-align: center;
font-size: 20px!important;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#9ab0d6));
background: -webkit-linear-gradient(top, #f7f7f7, #9ab0d6);
background: -moz-linear-gradient(top, #f7f7f7, #9ab0d6);
background: -ms-linear-gradient(top, #f7f7f7, #9ab0d6);
background: -o-linear-gradient(top, #f7f7f7, #9ab0d6);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #9ab0d6 100%);
-webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
-moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
font-family: 'Helvetica Neue',Helvetica, sans-serif;
}
.ribbon-right h1 {
font-size: 22px!important;
color: #000000;
text-shadow: #a7b7b8 0 1px 0;
margin:0px;
padding: 15px 10px;
}
.ribbon-right .ribbon-right-content:after {
border-color: #b8bfe0 transparent transparent transparent;
position: absolute;
display: block;
border-style: solid;
bottom: -1em;
content: '';
}
.ribbon-right .ribbon-right-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
.ribbon-right-stitches-top {
margin-top:2px;
border-top: 0px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
}
.ribbon-right-stitches-bottom {
margin-bottom:2px;
border-top: 0px dashed rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
}
CSS代码有点大，因为我使用了带状CSS生成器。
我尝试删除position：absolute to position：relative。但它没有用。
如何将该功能区放在<div>中以使其正确匹配。