bootstrapのグリッドを使ってお気軽にやってたらちょっと引っかかった。
順序良く並べてくれるんだけどRSSは内容によって文字数がわかります。
そのため順序良く並べていくとこのように隙間が出来てします。
ここでいうとHome222とHome2 111の間が開いてしまっている。
実際のiGoogleではこういったスペースはなく、フレキシブルに間隔を保っているのでとても見栄えが悪い。
そこで横1列に4つほどRSSをいれていたが、これを縦にすることにした。
従来
<div class="tab-pane active" id="menu1">
<div class="row-fluid">
<div class="span3 rssnavi">
Hom 111
</div>
<!-- RSS Divider -->
<div class="span3 rssnavi">
Home 222
</div>
<!-- RSS Divider -->
<div class="span3 rssnavi">
Home 333
</div>
<!-- RSS Divider -->
<div class="span3 rssnavi">
Home 444<br />Home 444<br />Home 444<br />Home 444<br />Home 444<br />
</div>
<!-- RSS Divider -->
</div>
</div>
<div class="tab-pane active" id="menu1">
<div class="row-fluid">
<div class="span3 rssnavi">
<!-- 1段目 -->
<div class="row-fluid">
<div class="span12 rssnavi">Home 444<br />Home 444<br />Home 444 Home 444 Home 444 Home 444 Home 444 Home 444<br />Home 444<br />Home 444<br /></div>
</div>
<br />
<!-- 2段目 -->
<div class="row-fluid">
<div class="span12 rssnavi">Home 444<br />Home 444<br />Home 444 Home 444 Home 444 Home 444 Home 444 Home 444<br />Home 444<br />Home 444<br /></div>
</div>
<br />
<!-- 3段目 -->
<div class="row-fluid">
<div class="span12 rssnavi">Home 444<br />Home 444<br />Home 444 Home 444 Home 444 Home 444 Home 444 Home 444<br />Home 444<br />Home 444<br /></div>
</div>
</div>
<!-- RSS Divider -->
<div class="span3 rssnavi">
Home 222
</div>
<!-- RSS Divider -->
<div class="span3 rssnavi">
Home 333
</div>
<!-- RSS Divider -->
<div class="span3 rssnavi">
Home 444<br />Home 444<br />Home 444<br />Home 444<br />Home 444<br />
</div>
<!-- RSS Divider -->
</div>
</div>
関連記事