在bootstrap 3 Jumbotron上应用css功能区_Css_Twitter Bootstrap 3

在bootstrap 3 Jumbotron上应用css功能区

css twitter-bootstrap-3

在bootstrap 3 Jumbotron上应用css功能区,css,twitter-bootstrap-3,Css,Twitter Bootstrap 3,我有一个bootstrap 3 Jumbotron，我正试图在拐角处应用丝带。现在，有很多关于如何在线应用css功能区的示例，但不是在Bootstrap3Jumbotron上。我相信这些类与ribbon类是冲突的，我不明白为什么它不能坐在Jumbotron上。见下文。功能区包装器绿色{ 宽度：180px；高度：172px；溢出：隐藏；位置：绝对位置；顶部：-4px；右：-4px； } .丝带绿{ 字体：粗体12px无衬线；颜色：#333；文本对齐：居中；文本阴影：rgba（2

我有一个bootstrap 3 Jumbotron，我正试图在拐角处应用丝带。现在，有很多关于如何在线应用css功能区的示例，但不是在Bootstrap3Jumbotron上。我相信这些类与ribbon类是冲突的，我不明白为什么它不能坐在Jumbotron上。见下文

。功能区包装器绿色{
宽度：180px；
高度：172px；
溢出：隐藏；
位置：绝对位置；
顶部：-4px；
右：-4px；
}
.丝带绿{
字体：粗体12px无衬线；
颜色：#333；
文本对齐：居中；
文本阴影：rgba（255255255,0.5）0px 1px 0px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
位置：相对位置；
填充：7px0；
左：-5px；
顶部：45px；
宽度：235px；
背景色：#BFDC7A；
背景图像：-webkit渐变（线性、左上、左下、从（#BFDC7A）到（#8EBF45））；
背景图像：-webkit线性渐变（顶部，#BFDC7A，#8EBF45）；
背景图像：-moz线性梯度（顶部，#BFDC7A，#8EBF45）；
背景图像：-ms线性梯度（顶部，#BFDC7A，#8EBF45）；
背景图像：-o-线性梯度（顶部，#BFDC7A，#8EBF45）；
颜色：#6a6340；
-网络工具包盒阴影：0px 0px 3px rgba（0,0,0,0.3）；
-moz盒阴影：0px 0px 3px rgba（0,0,0,0.3）；
盒影：0px 0px 3px rgba（0,0,0,0.3）；
空白：nowrap；
}
.ribbon绿色：之前，.ribbon绿色：之后{
内容：“；
边框顶部：3px实心#6e8900；
左边框：3倍实心透明；
右边框：3px实心透明；
位置：绝对位置；
底部：-3px；
}
.丝带绿：之前{
左：0；
}
.丝带绿：之后{
右：0；
}


引导示例

Aaaaa的旗舰计划
引导程序教程
Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目
这是一些文字。
这是另一个文本。

只需为jumbotron类添加相对位置，并将功能区移动到jumbotron中即可

HTML:

您将在jumbotron上看到ribbon。

它现在在jumbotron上，但太低了。我怎样才能把它舀起来而不摔碎呢

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="margin-top:20px;">

  <div class="jumbotron" class="relative">
    <div class="ribbon-wrapper-green"><div class="ribbon-green">The Flagship Programme of<br />Aaaaa Aaaaaa Aaaaaaaaa</div></div>
    <h1>Bootstrap Tutorial</h1>      
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>      
  <p>This is another text.</p>      
</div>

</body>
</html>

    .ribbon-wrapper-green {
width: 180px;
height: 172px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}

.ribbon-green {
  font: bold 12px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 45px;
  width: 235px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}
.jumbotron {
  position: relative;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}