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要素をスパンに変更して、タイトル div に配置するだけです。HTML では垂直方向の中央揃えが難しい場合があるため、タグを に設定し、position:relative5px 上に移動しました ( 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 に答える