如果 parent 有 class "pull-right"，Bootstrap button/pills 停止工作

Question

Scenario

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

Problem

当我尝试添加 button/pill 作为具有 pull-right class 的元素的 child 时，按钮在桌面方向（横向）上工作正常，但是当我将浏览器 window 调整为移动尺寸（纵向）时，button/pill 完全停止工作。我尝试切换浏览器，但结果是一样的。我尝试改用单选按钮，但也没有用。

Example

您可以从 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 行之后查看实际效果

Source

如果某些人 code-ninja 甚至不看演示也能找出问题，这就是代码块

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

谢谢你:)

Edit

编辑1：新增手机版截图

Answer 1

只需从第一个 col-sm-6 移除右拉 class 并将第一部分移动到第二部分，将第二部分移动到第一位置。希望它能解决您的问题。

格式化代码：

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

如果 parent 有 class "pull-right"，Bootstrap button/pills 停止工作

Bootstrap button/pills stops working if the parent has class "pull-right"

twitter-bootstrap

button

nav-pills