在div的角落覆盖引导标签

时间:2013-07-31 21:50:02

标签: html css twitter-bootstrap

我正在尝试在DIV的角落覆盖引导标签。

我想把标签放在div的左上角,就像叠加一样,这部分放在div上并且部分关闭。

由于

     <div class="span4" style="border-bottom: none; border-top: 4px solid #28A197;">
           <h3>Quick Links</h3>
      <div class="row">
      <div class="span2">
<div class="quickbtn">
<p><a href="#wirelessnetworkinfo" data-toggle="modal"><img src="images/icons/wirelesssignal.png" /></p>
<p>Wireless Network Information</a></p>
</div>
<br />
<div class="quickbtn">
<p><a href="http://mail.google.com" target="_blank"><img src="images/icons/gmail.png" /></p>
<p>Gmail</a></p>
</div>
      </div>

      </div>
  <span class="label label-important">UPDATED</span>

</div>  

Heres the JSFiddle of the coding etc. with example label ready for placement and the CSS for the div in question (button)

1 个答案:

答案 0 :(得分:4)

使用position: relative上的.quickbtnposition: absolute上的.quickbtn .label,您可以将标签放在.quickbtn内。

小提琴:http://jsfiddle.net/Pq6JL/1/

<小时/> 由于您的帖子不明确,我将添加以下内容:

如果您希望标签悬于.quickbtn之外,请为top的位置设置否定left.label

.quickbtn .label {
    position:absolute;
    left: -4px;
    top: -3px
}

小提琴:http://jsfiddle.net/Pq6JL/3/