css - 在 Twitter Bootstrap 中调整缩略图上的 CSS 功能区

Question

我正在尝试在这幅图片上创建一个 CSS 功能区。但功能区继续出现在屏幕的右上方。这是我的 HTML 代码

<li class="span4">
                <div class="thumbnail">

</div>

                  <img src="img/placeholder-360x200.jpg" alt="product name">
                  <div class="caption">
                    <h3>Product name</h3>
                    <p>
                      Few attractive words about your product.Few attractive words about your product.
                      Few attractive words about your product.Few attractive words about your product.
                    </p>
                  </div>
                  <div class="widget-footer">
                    <p>
                      <a href="#" class="btn btn-primary">Buy now</a>&nbsp;
                      <a href="product.html" class="btn">Read more</a>
                    </p>
                  </div>
                </div>

CSS 代码可以在这里找到。

以及我正在尝试构建的屏幕截图

Answer 1

try this

http://jsfiddle.net/UBfCE/68/

   .ribbon-wrapper{
    margin:0 0 0 212px;
    position:absolute;
    }