如何使用 bootstrap 设计名片

Question

我正在设计一张如下所示的名片：

Name Family                                     Image
Position
Phone
Address                               website

A short list of Product and services          small logo

我的主要问题是网站的位置和图片。我需要把网站地址放在图片的左下角旁边。

如您所见，图像应该从右上角开始到网站所在的位置。

Demo

代码

<div class="container">
    <div class="row">
        <div class="col-md-7">
            <div class="row">
                <div class="col-md-12"style="padding-right: 0; border-right: solid;">
                        <div  style="margin-bottom: 2px; text-align: left; background-color: red;">

                            <div class="row">
                                <div class="col-md-7">

                                    <p>Part 1</p>
                                    <p>Part 2</p>
                                    <p>Part 3</p>
                                    <p>Part 4</p>

                                </div>
                                <div class="col-md-1" style="text-align: bottom;">
                                    <div>Part 5</div>
                                </div>
                                <div class="col-md-4">

                                    <img height="100px" width="120px" style="float: right;"
                                        src="http://identityview.net/wp-content/themes/identityview/templates/Global-Business-single.jpg">

                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-9">Part 6</div>
                                <div class="col-md-3">
                                    <img height="60px" width="60px"
                                        src="http://identityview.net/wp-content/themes/identityview/templates/Global-Business-single.jpg"
                                        style="float: right;">
                                </div>

                            </div>


                        </div>
                </div>
            </div>


        </div>


    </div>

</div>

Answer 1

我在 JSFiddle 中尝试过它，这是我的快速解决方案。

                                <div class="col-md-1">

                                </div>
                                <div class="col-md-4" style="float:right;">
                                    <p style="display:inline;vertical-align:bottom;">Website</p>
                                    <img height="100px" width="120px"
                                        src="http://identityview.net/wp-content/themes/identityview/templates/Global-Business-single.jpg">

                                </div>

我为您更新了 JSFiddle，这样您就可以看到正在运行的解决方案。 http://jsfiddle.net/rc28avn0/1/

如何使用 bootstrap 设计名片

How to design a visit card using bootstrap

twitter-bootstrap

twitter-bootstrap-3