具有图像的Bootstrap 3面板

Question

我正在尝试重新创建此面板：

我只是想知道是否有人知道我该怎么做，所以我完成了html标记。但是我不知道如何开始设计它。

我的示例html：

    <div id="mainContainer" class="container">
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading">Item 01</div>
                <div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
            </div>
        </div>                
    </div>
</div>

Answer 1

检查一下，这将对您有帮助。

.my_panel > .panel-body {
  padding: 0px;
}
.my_panel > .panel-body > img {
  width: 100%;
  height: 100%;
}
.my_panel > .panel-footer {
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="mainContainer" class="container">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
          <div class="panel panel-default my_panel">
            <div class="panel-body">
              <img src="http://placehold.it/150x150" alt="" class="img-responsive center-block" />
            </div>
            <div class="panel-footer">
              <h3>The company</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, voluptas, sunt vitae mollitia iure perferendis rerum odio! Natus, cupiditate, est, quas, non perspiciatis in quo possimus eos voluptas tempore maxime.</p>
              <a href="#">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>