0

画像スクローラーにNivoSliderを使用しようとしていますが、ページ中央のナビゲーションバーのすぐ下にあるdivに配置したいと思います(他の多くのサイトと同様)。

私が達成したいのは、それを流動的にすることです(私が知っている最大幅はすでに100%です)が、親コンテナーを満たすと、ページ上で巨大に見え、すべてを圧倒します。

ページの中央に留まるスパンを使用できますか、またはNivoラッパーの幅と高さを指定した場合、この流動性をどのように維持しますか。私はそれをうまくやることができないようです、誰かが私を正しい方向に向けることができればそれは大いにありがたいです

編集わかりました。span2、span8、span2を作成し、nivosliderをspan8に配置しました。これでスライダーが中央に配置されましたが、もっと良い方法があると思います。

4

2 に答える 2

1

現在行っていることの代わりにこれを行うことができます(同じことを達成します)...

<div class="span8 offset2"></div>.

プリセットスパンcssクラスを使用するのではなく、正確な幅を設定するためにこれを行うことができます...

<div class="span12">

    <div style="width: MY_EXACT_WIDTH_IN_PIXELS; margin: 0 auto;">
        MY NIVO THINGY WITH 100% WIDTH
    </div>

</div>

あなたが望んでいるのは、nivoのものが常に中心にあることだと思います。グリッドシステムの設定方法では、span12領域(ページの中央940px)が常に中央に配置されます。

したがって、nivoを配置する場所はどこでも、すべてのブートストラップタグを終了する必要があります...

ここに例があります...

<html>
<head>
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
        <div class="container">
            <div class="row">
                <div class="span12" style="background-color: #CCC;">
                    <h4>Bootstrap span12</h4>
                </div>
            </div>
        </div>

        <div style="margin: 0 auto; width: 400px; background-color: #EFEFEF;">
            <h4>My nivo goes here</h4>
        </div>

        <div class="container">
            <div class="row">
                <div class="span12" style="background-color: #CCC;">
                    <h4>Bootstrap span12 again</h4>
                </div>
            </div>
        </div>
</body>
</html>
于 2012-06-25T16:17:02.273 に答える
0

ネイティブのTwitterブートストラップスライダーを使用しないことにしたのはなぜですか?

多分この記事はあなたを助けるでしょう:nivoスライダーを流動的にする

于 2012-06-25T12:31:39.897 に答える