0

ブートストラップレスポンシブCSSを使用してスライダーの幅を縮小してiPhoneに表示しようとしていますが、できません。助けてください http://jsfiddle.net/CXkQp/4/

スクリーンショット https://docs.google.com/file/d/0B3IBJKENGE7RQkk1eEI3TDNoN2c/edit

以下の私のコードを提供する

<div id="banner" class="clearfix" style="border-bottom: 2px solid #cacaca;">
          <div class="bx-wrapper" style="width:100%; position:relative; margin-top: 0px; margin-bottom: 0px;">
              <div class="bx-window" style="position:relative; overflow:hidden; width:100%">

                <div class="container">

                                <div id="da-slider" class="da-slider" style="margin-top: 0px; margin-bottom: 0px; height: 300px; background-position: 247950% 0%;">
                                  <div class="da-slide da-slide-toleft" style="width: 100%">
                                    <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate1A.jpg" alt="image01"></h2>
                                    <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate1B.jpg" alt="image01"></div>
                                  </div>
                                  <div class="da-slide da-slide-toleft" style="width: 100%">
                                    <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate2A.jpg" alt="image01"></h2>
                                    <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate2B.jpg" alt="image01"></div>
                                  </div>
                                  <div class="da-slide da-slide-fromright da-slide-current" style="width: 100%;">
                                    <h2><img src="http://www.defie.co/docs/examples/frontpage_rotate3A.jpg" alt="image01"></h2>
                                    <div class="da-img"><img src="http://www.defie.co/docs/examples/frontpage_rotate3B.jpg" alt="image01"></div>
                                  </div>
                                  <nav class="da-arrows" style="width: 100%">
                                    <span class="da-arrows-prev"></span>
                                    <span class="da-arrows-next"></span>
                                  </nav>
                                <nav class="da-dots"><span class=""></span><span class=""></span><span class="da-dots-current"></span></nav></div>
                                  </div>

              </div>
          </div>
      </div>
4

1 に答える 1

0

開始するためのいくつかのポイント。あなたの jsFiddle では、120 行目のコンテナ div の終了タグがないようです。

また、スライダーをスケーリングする必要がありますが、それは流動的な行の div 内ではありません。あなたのブートストラップ グリッドには作業が必要だと思います。流体グリッドの構造を注意深く確認してください: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

お役に立てれば。

于 2013-01-08T03:00:10.840 に答える