0

ヘッダーとタイトルを含むボックスを表示するために、Bootstrap テーマを使用しています。ボックス ヘッダーで、ボックス ツールバーにラベルを追加しましたが、正しく表示されません。どういうわけか、ボックスヘッダーの上を移動しています。

関連する HTML コード:

<div class="main-content">
    <div class="container padded">
        <div class="row">
            <div class="col-md-6">
            <div class="box">
              <div class="box-header">
                <span class="title">Stammdaten</span>
                <ul class="box-toolbar">
                  <li><span class="label label-green">Kunde</span></li>
                </ul>
              </div>

これは次のようになります。

ここに画像の説明を入力

誰でもこの問題を解決するのを手伝ってもらえますか? Bootstrap テーマ自体にも存在するのと同じコードですが、正しく表示されています。ありがとうございました。

CSS:

.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;
}
4

0 に答える 0