如果父级具有“pull-right”类，则引导按钮/药丸停止工作

Question

场景

我正在使用flatfy 引导模板开发一个简单的网站。

问题

当我尝试将按钮/药丸添加为具有 pull-right 类的元素的子元素时，该按钮在桌面方向（横向）下工作正常，但是当我将浏览器窗口调整为移动设备时大小（肖像），按钮/药丸完全停止工作。我尝试切换浏览器，但结果是一样的。我尝试使用单选按钮，但也没有用。

例子

你可以从here下载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>

谢谢你:)

编辑

编辑1： 新增手机版截图

Answer 1

只需从第一个 col-sm-6 中删除 pull-right 类，然后将第一部分移至第二部分，将第二部分移至第一位置。希望它能解决您的问题。

格式化代码：

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