Bootstrap ile şerit

Question

Bir web sitesine bootstrap kullanarak bir şerit koymaya çalışıyorum ancak doğru şekilde gösteremiyorum. İşte

temel html ve css kodu - Ben col-md-12 col-md-offset-4 koymak için çalıştı ama bunu yapabilecek bir şerit çevrimiçi jeneratör

<div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>A Pure CSS Ribbon</h1></strong><div class="ribbon-stitches-bottom"></div></div>

.ribbon { 
 
    width: 300px; 
 
    position: absolute; 
 
    text-align: center; 
 
    font-size: 20px!important; 
 
    background: #d64b4b; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c)); 
 
    background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c); 
 
    background: -moz-linear-gradient(top, #d64b4b, #ab2c2c); 
 
    background: -ms-linear-gradient(top, #d64b4b, #ab2c2c); 
 
    background: -o-linear-gradient(top, #d64b4b, #ab2c2c); 
 
    background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 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: 25px!important; 
 
    color: #801111; 
 
    text-shadow: #d65c5c 0 1px 0; 
 
    margin:0px; 
 
    padding: 15px 10px; 
 
    } 
 
.ribbon:before, .ribbon:after { 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    bottom: -1em; 
 
    border: 1.5em solid #c23a3a; 
 
    z-index: -1; 
 
    } 
 
.ribbon:before { 
 
    left: -2em; 
 
    border-right-width: 1.5em; 
 
    border-left-color: transparent; 
 
    -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; 
 
    -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; 
 
    box-shadow: rgba(000,000,000,0.4) 1px 1px 1px; 
 
    } 
 
.ribbon:after { 
 
    right: -2em; 
 
    border-left-width: 1.5em; 
 
    border-right-color: transparent; 
 
    -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; 
 
    -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; 
 
    box-shadow: rgba(000,000,000,0.4) -1px 1px 1px; 
 
    } 
 
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 
 
    border-color: #871616 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: 1px 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: 1px 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); 
 
    }

kullanmak Web’in ortasına koyduğunu ve daha düşük ekran çözünürlüğüne getirdiğini doğru göstermiyor, nasıl geliştirebilirim?

Teşekkürler

Answer 1

Bunu deneyin.

Sol üstteki yardımcı görüntü üzerinde Şerittir.

.mt-element-ribbon .ribbon.ribbon-shadow.ribbon-right, .mt-element-ribbon .ribbon.ribbon-shadow.ribbon-vertical-right { 
 
    box-shadow: -2px 2px 7px rgba(0,0,0,.4); 
 
} 
 
.mt-element-ribbon .ribbon.ribbon-color-danger { 
 
    background-color: #ed6b75; 
 
    color: #fff; 
 
} 
 
.mt-element-ribbon .ribbon.ribbon-shadow { 
 
    box-shadow: 2px 2px 7px rgba(0,0,0,.4); 
 
} 
 
.mt-element-ribbon .ribbon.ribbon-right { 
 
    left: auto; 
 
    right: -2px; 
 
} 
 
.mt-element-ribbon .ribbon { 
 
    position: absolute; 
 
    top: 20px; 
 
\t left:7px; 
 
    padding: .5em 1em; 
 
    z-index: 5; 
 
} 
 
.mt-element-ribbon .ribbon, .mt-element-ribbon .ribbon.ribbon-color-default, .mt-element-ribbon .ribbon.ribbon-color-default>.ribbon-sub, .mt-element-ribbon .ribbon>.ribbon-sub { 
 
    background-color: #bac3d0; 
 
    color: #384353; 
 
} 
 
.uppercase { 
 
    text-transform: uppercase!important; 
 
}

<div class="container text-center">  
 
    <div class="row"> 
 
     \t 
 
     <div class=" mt-element-ribbon" align="center"> 
 
     <img src="http://lorempixel.com/600/600/" class="img-responsive" alt="Image" > 
 
      <div class="ribbon ribbon-left ribbon-shadow ribbon-color-danger uppercase">&#36;0000</div> 
 
      
 
     </div> 
 
    </div>