右divのAdminLTE情報ボックス

debugcn 投稿 Dev

ブルーレイ

こんにちは私はAdminLTEテンプレートを使用しており、情報ボックスにドロップダウンメニューを追加したいと思います。私のアイデアは、情報ボックスの右側にあるドロップダウンボタンです。これが私のコードです：

<div class="info-box info-box-sm dropdown">
  <div class="info-box-icon bg-aqua">
    <i class="fa fa-briefcase"></i>
  </div>

  <div class="info-box-content">
    <span class="info-box-text">Title</span>
    <span class="info-box-number">369 records</span>
  </div>

  <div class="info-box-dropdown">
      <!-- Right side button for dropdown -->
  </div>
</div>

CSS：

 .info-box.info-box-sm { min-height: 45px; margin-bottom: 15px; font-size: 15px; }
.info-box.info-box-sm small { font-size: 12px; }
.info-box.info-box-sm .info-box-icon { height: 52px; width: 52px; font-size: 27px; line-height: 52px; }
.info-box.info-box-sm .info-box-content {
  margin-left: 52px;
}
.info-box .info-box-content .info-box-text{
    font-size: 15px!important;
}
.info-box .info-box-content .info-box-number{
    font-size: 15px!important;
}
.info-box.info-box-sm.dropdown{
    float: left;
}
.info-box.info-box-sm.dropdown .info-box-icon{
    background: blue;
}
.info-box.info-box-sm.dropdown .info-box-content{
    width: 70%;
    background: red;
    float: left;
}
.info-box.info-box-sm.dropdown .info-box-dropdown{
    float: right;
    background: blue;
}

そしてこれは結果です：

私はこれを必要とする：

ご協力ありがとうございます

バルガフ・チュダサマ

.info-box.info-box-sm {
  min-height: 45px;
  margin-bottom: 15px;
  font-size: 15px;
  display: inline-flex;
}

.info-box.info-box-sm small {
  font-size: 12px;
}

.info-box.info-box-sm .info-box-icon {
  height: 52px;
  width: 52px;
  font-size: 27px;
  line-height: 52px;
}

.info-box.info-box-sm .info-box-content {
  //margin-left: 52px;
  height: 52px;
}

.info-box .info-box-content .info-box-text {
  font-size: 15px!important;
}

.info-box .info-box-content .info-box-number {
  font-size: 15px!important;
}

.info-box.info-box-sm.dropdown {
  float: left;
}

.info-box.info-box-sm.dropdown .info-box-icon {
  background: blue;
  display: inline-flex;
}

.info-box.info-box-sm.dropdown .info-box-content {
  width: 70%;
  background: red;
  float: left;
}

.info-box.info-box-sm.dropdown .info-box-dropdown {
  float: right;
  background: blue;
}

<div class="info-box info-box-sm dropdown">
  <div class="info-box-icon bg-aqua">
    <i class="fa fa-briefcase"></i>
  </div>

  <div class="info-box-content">
    <span class="info-box-text">Title</span>
    <span class="info-box-number">369 records</span>
  </div>

  <div class="info-box-dropdown">
    <!-- Right side button for dropdown -->
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]