1

Twitter Bootstrap、流動的なレイアウトでWebサイトを構築しています。左側にコンテンツがあり、右側に小さなメニューがあります。メニューをうまく配置したいと思います。

<div class="row-fluid">
    <div class="span9">...</div>
    <div class="span3">
        <div class="well" style="height: 100%;">
            <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i>   Een project toevoegen</a>
            <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i>   Alle projecten bekijken</a>
            <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i>   Deze lijst afdrukken</a>
        </div>
    </div>
</div>

問題は、メニュー内のすべてのリンクを含めるのに十分な高さがウェルにないことです。メニューはPHPによって生成され、必要以上に大きくしたくないので、手動で高さを設定したくありません。

<div class="row-fluid">
    <div class="span9">...</div>
    <div class="span3 well">
        <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i>   Een project toevoegen</a>
        <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i>   Alle projecten bekijken</a>
        <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i>   Deze lijst afdrukken</a>
    </div>
</div>

これにより、すべてのリンクを含めるのに十分な大きさになりますが、span3 divが大きくなりすぎて、span9divの隣に収まりません。

この問題の解決策はありますか？

4

1 に答える 1

3

.wellボタンが浮いているため、適切に折り返されていません。float:noneそれらを（bootstrap.cssスタイルシートではなく）スタイルシートのように定義するだけで、機能するはずです。

HTML

<div class="row-fluid">
    <div class="span9">...</div>
    <div class="span3">
        <div class="well menu">
            <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i>   Een project toevoegen</a>
            <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i>   Alle projecten bekijken</a>
            <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i>   Deze lijst afdrukken</a>
        </div>
    </div>
</div>

CSS

.menu .btn {
   float:none;
}

注：.menuセクションをターゲットにするクラスを定義しました。.wellこれにより、ブートストラップから変更したcssはそのセクションにのみ適用され、ドキュメントの残りの部分には適用されません。

于 2012-04-17T12:20:36.567 に答える