帶有圖像的 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>