Bootstrap Portlet CSS調整

Question

我正在使用我發現的代碼段創建port-lets（有點像面板）。

這並不具體有一個標題，但我想看看是否可以添加任何CSS來創建一個。

<div class="portlet"> 
        <div class="portlet-title"> 
         <div class="caption"> 
          <i class="glyphicon glyphicon-calendar"></i> 
          <span class="caption-subject text-uppercase"> Portlet</span> 
          <span class="caption-helper">weekly stats...</span> 
         </div> 
         <div class="actions"> 
          <a href="javascript:;" class="btn"> 
           <i class="glyphicon glyphicon-pencil"></i> 
           Edit 
          </a> 
          <a href="javascript:;" class="btn"> 
           <i class="glyphicon glyphicon-paperclip"></i> 
           Add 
          </a> 
          <a href="javascript:;" class="btn btn-circle"> 
           <i class="glyphicon glyphicon-resize-full"></i> 
          </a> 
         </div> 
        </div> 
        <div class="portlet-body"> 
         <h4>Heading Text</h4> 
         <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p> 
        </div> 
       </div> 

這裏是CSS：

.content { 
    padding: 30px; 
    background: #f1f3fa; 
} 

.margin-bottom-30 { 
    margin-bottom: 30px; 
} 

/* Portlet */ 
.portlet { 
    background: #fff; 
    padding: 20px; 
} 

.portlet.portlet-gray { 
    background: #f7f7f7; 
} 

.portlet.portlet-bordered { 
    border: 1px solid #eee; 
} 

/* Portlet Title */ 
.portlet-title { 
    padding: 0; 
    min-height: 40px; 
    border-bottom: 1px solid #eee; 
    margin-bottom: 18px; 
} 

.caption { 
    float: left; 
    display: inline-block; 
    font-size: 18px; 
    line-height: 18px; 
} 

.caption i { 
    color: #777; 
    font-size: 15px; 
    font-weight: 300; 
    margin-top: 3px; 
} 

.caption-subject { 
    color: #666; 
    font-size: 16px; 
    font-weight: 600; 
} 

.caption-helper { 
    padding: 0; 
    margin: 0; 
    line-height: 13px; 
    color: #9eacb4; 
    font-size: 13px; 
    font-weight: 400; 
} 

/* Actions */ 
.actions { 
    float: right; 
    display: inline-block; 
} 

.actions a { 
    margin-left: 3px; 
} 

.actions .btn { 
    color: #666; 
    padding: 3px 9px; 
    font-size: 13px; 
    line-height: 1.5; 
    background-color: #fff; 
    border-color: #ccc; 
    border-radius: 50px; 
} 

.actions .btn i { 
    font-size: 12px; 
} 

.actions .btn:hover { 
    background: #f2f2f2; 
} 

/* Inputs */ 
.inputs { 
    float: right; 
    display: inline-block; 
    padding: 4px 0; 
    margin-top: -10px; 
} 

.input-inline { 
    width: 240px; 
    display: inline-block; 
    vertical-align: middle; 
} 

/* Btn Circle */ 
.actions .btn.btn-circle { 
    width: 28px; 
    height: 28px; 
    padding: 3px 7px; 
    text-align: center; 
} 

.actions .btn.btn-circle i { 
    font-size: 11px; 
} 

JS小提琴：https://jsfiddle.net/dmz9xxr2/

我曾嘗試：

不必知道太多關於CSS，我在想，我必須將背景顏色添加到從portlet頂部開始的指定高度（.portlet）。我可能需要添加一個額外的div或span來讓這個工作，但是想看看是否有任何css技巧可以解決這個問題。

最終目標：

Answer 1

可以使用僞元件，即::before。

Updated fiddle

.portlet { 
    position: relative; 
    background: #fff; 
    padding: 20px; 
    z-index: 1; 
} 
    .portlet::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 59px; 
    background: steelblue; 
    z-index: -1; 
    }