0

Twitter Bootstrap を使用して CV ページを作成していますが、流動的なレイアウトとレスポンシブなレイアウトの両方が必要です。ページはこちらです。

コードは次のとおりです。

<div class="container-fluid">
<div class="row-fluid">
    <div class="row-fluid span7">
        <div class="span2">
            <img src="assets/img/scelta1.jpg" class="thumbnail pull-left"/>
        </div>
        <div class="hero-unit span5">
            <h1>Fabrizio Bianchi</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non urna ut nisl rhoncus gravida. 
            Morbi placerat libero at lectus gravida suscipit. Nam hendrerit dolor ut lacus euismod scelerisque. 
            Etiam vitae congue risus. Quisque vitae mattis mi. Nulla sed tristique felis. Mauris scelerisque augue a nunc aliquet consequat.
            </p>
        </div>
    </div>
        <div class="span5">
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 80%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 50%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 60%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 90%"></div>
            </div>
            <span class="label label-inverse">Skill</span>
            <div class="progress">
                <div class="bar" style="width: 70%"></div>
            </div>
        </div>

    </div>
</div>

ご覧のとおり、問題は、最初の 2 つの要素に対してネストされた流体グリッドを作成しようとすると、両方が左に移動し、それらと行の 3 番目の要素 (スキル部分) の間に大きなスペースが残っていることです。 .

ドキュメントを見ると、流動的なレイアウトにはデフォルトで左側のサイドバーが含まれており、ネストされたグリッドがそのように扱われていることが原因であると思います。そうですか？その場合、どうすれば退会できますか？

4

1 に答える 1

2

流体グリッドはパーセンテージに基づいています。つまり、最初の「相対的な」親のXX％の幅が必要です。

.row-fluid別の言い方をすれば、ネストするたびに新しい.span12行が作成され、12のスパンに任意の方法で分割できます。

したがって、行を埋めるために、スパンを合計して最大12にする必要があります。

 <div class="row-fluid span7">
     <div class="span2">
        <!-- ... -->
     </div>
    <div class="hero-unit span10">
        <!-- ... -->
    </div>
</div>

これが、通常のグリッドと流体グリッドの主な違いです。

于 2012-07-23T20:38:38.833 に答える