在Bootstrap面板中创建一个personnal标头

Question

我想在面板中使用Bootstrap创建它：

你知道吗，我怎么能编码呢？我刚刚开始学习CSS，你的帮助将帮助我提高自己的知识。

Answer 1

我的代码：

<div class="panel panel-primary">
            <div class="panel-heading">
                <div class="container-fluid panel-container">
                    <div class="col-xs-2 text-left" style="margin-left: -20px;">
                        <div>
                            <img src="img/categories/mode.jpg" class="" width="35px" height="35px">
                        </div>
                    </div>
                    <div class="col-xs-6 text-left" style="margin-left: 10px; margin-top: 4px;">
                        <div style="display: inline-block; position: absolute; margin-top: -7px;">
                            <p>Valentin MARTIN</p>
                            <p class="espace">Il y a 5 minutes, <span class="fa fa-map-marker">&nbsp;</span>Saint-Patersbourg</p>
                        </div>
                    </div>
                    <div class="col-xs-4 text-right">
                        <div style="display: inline-block; position: relative; margin-top: 3px;">
                            <img src="img/logo/share-256.png" width="30px" height="30px">
                        </div>
                        <div style="display: inline-block; position: absolute; margin-left: 4px; margin-top: 3px;">
                            <img src="img/logo/coeur.png" width="30px" height="30px">
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="panel-body">
                <img src="img/background.png" style="width: 100%; height:170px; background-size: cover;">
            </div>
            <div class="panel-footer">

            </div>
        </div>

我的结果：Picture