如果父母有“拉右”等级,则Bootstrap按钮/药丸停止工作

时间:2016-08-29 10:26:06

标签: twitter-bootstrap button nav-pills

  

方案

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

  

问题

当我尝试添加一个button / pill作为具有 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 行之后看到它的实际效果

  

来源

这是代码块,如果一些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>

谢谢你:)

  

修改

EDIT1: 添加了移动版的截图 portrait mode of image in which the buttons/pills stop working

1 个答案:

答案 0 :(得分:1)

只需从第一个col-sm-6中删除右拉类,然后将第一个部分移动到第二个和第二个部分到第一个位置。希望它能解决你的问题。

格式化代码:

java.lang.ClassCastException: org.springframework.cache.interceptor.SimpleKey cannot be cast to java.lang.Long
    at in.per.amt.ignite.cache.ChannelCacheStore.load(ChannelCacheStore.java:19)