ブートストラップボタン/錠剤親がクラス「プルライト」

Question

シナリオ

を持っている場合、私は、単純なWebサイトを開発するflatfyブートストラップ・テンプレートを使用しています作業を停止します。

問題

私はプル右クラスを持つ要素の子としてボタン/丸薬を追加しようとすると、ボタンがデスクトップの向き（ランドスケープ）で正常に動作しますが、私ブラウザのウィンドウサイズを携帯電話のサイズ（ポートレート）に変更すると、ボタン/ピルが完全に機能しなくなります。私はブラウザの切り替えを試みましたが、結果は同じでした。代わりにラジオボタンを使ってみましたが、うまくいきませんでした。

例

あなたはhereからflatfyテンプレートをダウンロードして、アクション

ソースでそれを見るためのindex.htmlのライン後

<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> 

を追加することができます

このいくつかのコード-忍者でもデモを見ずに

<!-- 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> 

を、問題を把握することができた場合、コードのブロックですありがとうございました:)

編集

編集1： モバイル版のスクリーンショットを追加

Answer 1

最初のcol-sm-6からプルー右クラスを削除し、最初のセクションを2番目と2番目のセクションに移動して最初の場所に移動するだけです。あなたの問題を解決することを願っています。

フォーマット済みコード：

<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>