0

我将如何内联以下博客文章示例。我希望标签显示在标题内，这是代码：

http://jsfiddle.net/Rmhq8/

<div class="blog-title" >Title test #1</div>
<div class="blog-tag" >
    <span class="label label-warning ">Event</span></div>
<div class="blog-author">Author: Jareddlc</div>
<div class="blog-date">posted: Wednesday, June 12, 2013 7:11:00 PM</div>
<pre>Testing text that goes inside the body</pre>
<div class="blog-program">tag: ENG</div>
<hr style="border-top: 1px dotted #b0b0b0;border-bottom: 0px">

我正在用 jquery 动态构建它：

var title = "<div class=\"blog-title\" >"+post.title+"</div>";
var tag = "<div class=\"blog-tag\" ><span class=\"label label-warning \">"+post.tag+"</span></div>";
var author = "<div class=\"blog-author\">Author: "+post.author+"</div>";
var date = "<div class=\"blog-date\">posted: "+formatDate(post.date)+"</div>";
var body = "<pre>"+post.body+"</pre>";
var program = "<div class=\"blog-program\">tag: "+post.program+"</div>";
var footer = "<hr style=\"border-top: 1px dotted #b0b0b0;border-bottom: 0px\">";
var entry = title+tag+author+date+body+program+footer;

有没有办法用引导程序做到这一点？或者我该怎么做？

更新并以标题为中心

4

1 回答 1

1

此处无需涉及 Bootstrap，只需将blog-tag元素更改为 span 并将其放在标题 div 中即可。在 HTML 中垂直居中可能很难，所以我将标签设置为position:relative并将其向上移动 5px ( top:-5px;)。

HTML

<div> 
    <span class="blog-title">Jared Test 2</span> 
    <span class="blog-tag label label-warning ">Event</span>
</div>

CSS

.blog-tag {
    font-size: 12px;
    line-height: 20px;
    position: relative;
    top: -5px;
}

更新小提琴

要在 javascript 中执行此操作：

var titleAndTag = '<div><span class="blog-title" >'+post.title+'</span><span class="blog-tag label label-warning ">'+post.tag+'</span></div>';

请注意，通过使用单引号，您不必转义双引号。

于 2013-06-18T19:41:35.473 回答