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

标签 html css twitter-bootstrap-3

<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

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

最佳答案

您的 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/

关于html - 如何在图片旁边加上姓名和日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25908999/

相关文章:

php - 网址后面的用户名

javascript - History.replaceState 未定义 IE11

html - 控制网页的响应能力

jquery - 响应式 Bootstrap 轮播

html - Bootstrap CSS 覆盖我的自定义 CSS

css - 如何让max-height在IE6,IE7中正常工作?

javascript - css-如何向图像添加动态 slider ?

css - Bootstrap 3.0.3 & 3.2.0 区别

javascript - 无法通过 jquery 监听器将 html 表单链接到 javascript 函数

html - 使用图像作为可点击的 anchor 链接