Question

我如何内联以下博客帖子示例。我希望标签显示为标题的内联，这里是代码：

<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;

有没有办法用bootstrap做到这一点？或者我将如何做到这一点？

更新并以标题为中心

Answer 1

不需要在这里涉及Bootstrap，只需将blog-tag元素更改为span并将其放在title 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;
}

Updated Fiddle

在javascript中执行此操作：

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

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

Bootstrap内联两个div

1 个答案: