Databases
StackOverflow2013
Postsdbo
POLabel not positioned correctly in box-toolbar (Bootstrap 3.0 Theme)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLabel not positioned correctly in box-toolbar (Bootstrap 3.0 Theme)
    text
    copied!<p>I am working with a Bootstrap Theme in order to show a Box with a Header and a Title. In the box-header, I add a label to the box-toolbar, but it is not displayed correctly. Somehow it is moving above the box-header.</p> <p>Relevant HTML Code:</p> <pre><code>&lt;div class="main-content"&gt; &lt;div class="container padded"&gt; &lt;div class="row"&gt; &lt;div class="col-md-6"&gt; &lt;div class="box"&gt; &lt;div class="box-header"&gt; &lt;span class="title"&gt;Stammdaten&lt;/span&gt; &lt;ul class="box-toolbar"&gt; &lt;li&gt;&lt;span class="label label-green"&gt;Kunde&lt;/span&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This is how it looks like:</p> <p><img src="https://i.stack.imgur.com/cnybh.png" alt="enter image description here"></p> <p>Can anyone help me to fix this issue? It is the same code that is also present in the Bootstrap Theme itself, but there it is showing up correctly. Thank you.</p> <p>CSS:</p> <pre><code>.box .box-header .box-toolbar, .box .box-footer .box-toolbar { margin: 0; padding: 0; float: right; list-style: none; } .label-green { background: #6eb056; background-image:url('data:something...'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8cc079), color-stop(100%, #6eb056)); background-image: -webkit-linear-gradient(top, #8cc079, #6eb056); background-image: -moz-linear-gradient(top, #8cc079, #6eb056); background-image: -o-linear-gradient(top, #8cc079, #6eb056); background-image: linear-gradient(top, #8cc079, #6eb056); -webkit-box-shadow: 0 1px 0 #f7f7f7, inset 0 1px 1px #80b96b; -moz-box-shadow: 0 1px 0 #f7f7f7, inset 0 1px 1px #80b96b; box-shadow: 0 1px 0 #f7f7f7, inset 0 1px 1px #80b96b; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload