Html 通知不会显示在特定按钮上_Html_Css_Twitter Bootstrap

Html 通知不会显示在特定按钮上

html css twitter-bootstrap

Html 通知不会显示在特定按钮上,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有带span类的按钮，我面临一个问题，如何在特定按钮上方显示每个span类。像这样的图像。我该怎么做 .label{ 位置：绝对位置；顶部：2.5雷姆； } 按钮 4. 按钮 5. 按钮 6. 在按钮内添加span <div class="container"> <button class="btn btn-default" type="submit">Button<span class="label label-success">4</s

我有带span类的按钮，我面临一个问题，如何在特定按钮上方显示每个span类。像这样的图像。我该怎么做

.label{
位置：绝对位置；
顶部：2.5雷姆；
}



按钮
4.
按钮
5.
按钮
6.

在按钮内添加span

<div class="container">
  <button class="btn btn-default" type="submit">Button<span class="label label-success">4</span></button>
  <button class="btn btn-default" type="submit">Button<span class="label label-success">5</span></button>
  <button class="btn btn-default" type="submit">Button<span class="label label-success">6</span></button>
</div>

在按钮内添加跨距

<div class="container">
  <button class="btn btn-default" type="submit">Button<span class="label label-success">4</span></button>
  <button class="btn btn-default" type="submit">Button<span class="label label-success">5</span></button>
  <button class="btn btn-default" type="submit">Button<span class="label label-success">6</span></button>
</div>

这是你想要的吗已编辑

.label{
位置：绝对位置；
顶部：2.5雷姆；
}
.按钮标签{
左边距：-25px；
}



按钮
4.
按钮
5.
按钮
6.

这是你想要的吗已编辑

.label{
位置：绝对位置；
顶部：2.5雷姆；
}
.按钮标签{
左边距：-25px；
}



按钮
4.
按钮
5.
按钮
6.

试试这个

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://use.fontawesome.com/f574067864.js"></script> <!DOCTYPE html> <html> <head> <title></title> </head> <style> .sub-btn{ position: relative; } .sub-btn span{ position: absolute !important; right: 0; top: -15px !important; } </style> <body> <hr> <div class="container"> <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">4</span></button> <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">5</span></button> <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">6</span></button> </div> </body> </html>

.子btn{ 位置：相对位置； } .子btn跨度{ 位置：绝对！重要；右：0；顶部：-15px！重要； } 按钮4 按钮5 按钮6
试试这个

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://use.fontawesome.com/f574067864.js"></script> <!DOCTYPE html> <html> <head> <title></title> </head> <style> .sub-btn{ position: relative; } .sub-btn span{ position: absolute !important; right: 0; top: -15px !important; } </style> <body> <hr> <div class="container"> <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">4</span></button> <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">5</span></button> <button class="btn btn-default sub-btn" type="submit">Button <span class="label label-success">6</span></button> </div> </body> </html>

.子btn{ 位置：相对位置； } .子btn跨度{ 位置：绝对！重要；右：0；顶部：-15px！重要； } 按钮4 按钮5 按钮6
Special button means？Special button means？这不起作用，在@Ravi sukhadia answer之后的所有其他设计更改都起作用请参见我编辑的尝试。。我为该标签编写了特定的类，并向其中添加了css。这不起作用，在@Ravi sukhadia answer之后的所有其他设计更改都起作用了。请看我编辑并尝试了它。。我为这个标签编写了一个特殊的类，并在其中添加了css。这也很有效，我认为你们应该有资格得到确认的答案。谢谢这也很有效，我想你们应该有资格得到确认的答案。谢谢