0

シナリオ

flatfyブートストラップ テンプレートを使用して、単純な Web サイトを開発しています。

問題

プルライトクラスを持つ要素の子としてボタン/ピルを追加しようとすると、ボタンはデスクトップの向き (横向き) では正常に動作しますが、ブラウザー ウィンドウのサイズをモバイル サイズ (縦向き) に変更すると、ボタン/ピルが停止します全体的に働いています。ブラウザを変えてみましたが、結果は同じでした。代わりにラジオボタンを使用してみましたが、それもうまくいきませんでした。

例

ここから flatfy テンプレートをダウンロードして追加できます

<ul class="col-xs-4 col-xs-offset-4 nav nav-pills pull-right" id="cardFlipPills">
    <li class="active" id="pill-Front"><a href="#vCard-viewer">Front</a></li>
    <li id="pill-back"><a href="#vCard-viewer">Back</a></li>
</ul>
<p class="btn btn-success">Submit</p>

index.html の176行目以降で動作を確認する

ソース

コード忍者がデモを見なくても問題を理解できる場合、これはコードのブロックです。

<!-- Use it -->
<div id ="useit" class="content-section-a">

    <div class="container">

        <div class="row">

            <div class="col-sm-6 pull-right wow fadeInRightBig">
                <img class="img-responsive " src="img/ipad.png" alt="">
                <ul class="col-xs-4 col-xs-offset-4 nav nav-pills pull-right" id="cardFlipPills">
                    <li class="active" id="pill-Front"><a href="#vCard-viewer">Front</a></li>
                    <li id="pill-back"><a href="#vCard-viewer">Back</a></li>
                </ul>
                <p class="btn btn-success">Submit</p>
            </div>

            <div class="col-sm-6 wow fadeInLeftBig"  data-animation-delay="200">   
                <h3 class="section-heading">Full Responsive</h3>
                <div class="sub-title lead3">Lorem ipsum dolor sit atmet sit dolor greand fdanrh<br> sdfs sit atmet sit dolor greand fdanrh sdfs</div>
                <p class="lead">
                    In his igitur partibus duabus nihil erat, quod Zeno commuta rest gestiret. 
                    Sed virtutem ipsam inchoavit, nihil ampliusuma. Scien tiam pollicentur, 
                    uam non erat mirum sapientiae lorem cupido
                    patria esse cariorem. Quae qui non vident, nihilamane umquam magnum ac cognitione.
                </p>

                 <p><a class="btn btn-embossed btn-primary" href="#" role="button">View Details</a> 
                 <a class="btn btn-embossed btn-info" href="#" role="button">Visit Website</a></p>
            </div>   
        </div>
    </div>
    <!-- /.container -->
</div>

ありがとうございました ：）

編集

Edit1: モバイル版のスクリーンショットを追加 ボタン/ピルが機能しなくなる画像のポートレート モード

4

1 に答える 1

1

最初の col-sm-6 から pull-right クラスを削除し、最初のセクションを 2 番目に、2 番目のセクションを 1 番目に移動するだけです。問題が解決することを願っています。

フォーマットされたコード:

<div class="row">


  <div class="col-sm-6 wow fadeInLeftBig animated animated" data-animation-delay="200"  style="visibility: visible;">
    <h3 class="section-heading">Full Responsive</h3>
    <div class="sub-title lead3">Lorem ipsum dolor sit atmet sit dolor greand fdanrh<br> sdfs sit atmet sit dolor greand fdanrh sdfs</div>
    <p class="lead">
      In his igitur partibus duabus nihil erat, quod Zeno commuta rest gestiret. Sed virtutem ipsam inchoavit, nihil ampliusuma. Scien tiam pollicentur, uam non erat mirum sapientiae lorem cupido patria esse cariorem. Quae qui non vident, nihilamane umquam
      magnum ac cognitione.
    </p>

    <p><a role="button" href="#" class="btn btn-embossed btn-primary">View Details</a>
      <a role="button" href="#" class="btn btn-embossed btn-info">Visit Website</a></p>
  </div>

  <div class="col-sm-6  wow fadeInRightBig animated animated" style="visibility: visible;">
    <img alt="" src="img/ipad.png" class="img-responsive ">
    <ul class="col-xs-4 col-xs-offset-4 nav nav-pills pull-right" id="cardFlipPills">
      <li class="active" id="pill-Front"><a href="#vCard-viewer">Front</a></li>
      <li id="pill-back"><a href="#vCard-viewer">Back</a></li>
    </ul>
    <p class="btn btn-success">Submit</p>
  </div>
</div>
于 2016-08-29T11:04:39.873 に答える