0

设想

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

问题

当我尝试将按钮/药丸添加为具有右拉类的元素的子元素时，该按钮在桌面方向（横向）下工作正常，但是当我将浏览器窗口调整为移动尺寸（纵向）时，按钮/药丸停止一起工作。我尝试切换浏览器，但结果是一样的。我尝试使用单选按钮，但也没有用。

例子

您可以从此处下载 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 类，然后将第一部分移动到第二部分，将第二部分移动到第一位置。希望它能解决您的问题。

格式化代码：

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