html - 如何在图片旁边加上姓名和日期

Question

<div class="row col-lg-6 col-sm-6">
    <div class="thumbnail">
        <div class="row">
            <div class="pst_h">
                <div class="pr_p col-md-2">
                    <img src="pic" alt="Profile Pic"
                        width="50px" height="50px"/>
                </div>
                <div class="hdr col-md-10">
                    <div class="rec_dtl">
                        <strong>efgh&nbsp;abcd<br/></strong>
                    </div>
                    <div class="rec_dt"> 8/30/14 </div>
                    <div class="post">
                        First of all this query can't work as it is. I already responded about the nee
                    </div>
                </div>
            </div>
        </div>

JSFiddle

我想把名字和日期放在图片旁边，但它显示在图片下方。

Answer 1

您的 Bootstrap 类是正确的，当屏幕宽度为 md (>= 992px) 时，标题将出现在图像旁边。如果展开 fiddle 面板，您应该会看到它按预期工作

默认情况下， fiddle 面板非常窄。如果您使用 col-xs 那么文本将始终显示在图像旁边

<div class="row col-lg-6 col-sm-6">
            <div class="thumbnail">
                <div class="row">
                    <div class="pst_h">
                        <div class="pr_p col-xs-2">
                            <img src="pic" alt="Profile Pic"
                            width="50px" height="50px"/>
                        </div>
                        <div class="hdr col-xs-10">
                            <div class="rec_dtl">
                                <strong>efgh&nbsp;abcd<br/></strong>
                            </div>
                            <div class="rec_dt"> 8/30/14 
                     </div>
                    <div class="post">
                       First of all this query can't work as it is. I already responded about the nee                             
                    </div>
                </div>
            </div>
        </div>

新 fiddle :http://jsfiddle.net/3khsyqog/