小编Cee*_*Gee的帖子

如何让Bootstrap 3折叠式手风琴面板加载到其内容的顶部而不是中途下载?

我有一系列bootstrap 3手风琴面板,里面有很多内容,几乎可以正常工作......它们按照需要加载折叠,然后在按下时打开,在过程中折叠任何其他打开的面板; 都好...

但是当我打开Panel 1并向下滚动其内容,然后打开Panel 2时,Panel 2内容将"向上"加载到可见浏览器窗口的顶部; 意味着用户必须向上滚动才能看到Panel 2的顶部.令人沮丧!

我希望加载Panel 2,以便在浏览器窗口中显示它的顶部.

这是一个JSFiddle

<div class="panel-group" id="accordion">
    <!-- first panel -->
    <div class="panel panel-default">
        <div class="panel-heading"> 
            <span class="strong">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseOne" id="predict">
                   Gettysburg <span class="caret"></span>
                </a>
            </span>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <!--LOTS OF CONTENT - replaced with image-->
                <img src="http://i.imgur.com/AMhADP1.png" />
            </div>
        </div>
    </div>

    <!-- second panel -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="strong">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="aries">
                    Background <span class="caret"></span>
                </a>
            </span>
        </div> …
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap twitter-bootstrap-3

9
推荐指数
2
解决办法
9078
查看次数

Bootstrap 3:将导航栏项目保留在折叠之外而不包装到新行?

我可以使用一些帮助让我的Bootstrap 3导航栏在折叠时看起来正确.

抱歉,如果这是一个重复的问题,但良好的长搜索没有产生我需要的答案.

我已经基于Bootstrap演示代码创建了一个响应式导航栏.在其中,有一个40x40图像和一个连接到下拉菜单的地球字形,我已经右对齐并从导航折叠中省略了.

不幸的是,当导航器崩溃时,40x40和全球字形出现在一个新线上,这是我不想要的.

当导航器折叠时,我的完美布局将是40x40和地球仪与我的品牌形象,折叠按钮等出现在同一行; 右对齐,不包含在崩溃中.

感谢您提供任何建议!

代码是这样的:

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-hd-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="index.php"><img class="navbar-brand img-responsive" src="http://placehold.it/138x38" alt="Logo"></a>
    </div>
     <div class="navbar-right">
        <ul class="nav"  style="float: right; display: inline-block !important">
            <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://placehold.it/40x40" alt="Profile Image" style="display: inline-block !important"/><b class="caret grey"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Hello</li>
                    <li class="divider"></li>
                    <li><a href="">Thing 1</a></li>
                    <li class="divider"></li>
                    <li><a href="">Thing 2</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav" …
Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap twitter-bootstrap-3

7
推荐指数
1
解决办法
1万
查看次数

是否可以使用板载浏览器在Motorola Droid Razr中滚动Bootstrap 3响应表?

我可以用一些新鲜的想法!

标题说明了一切,真的:我的测试Droid Razr不允许我在自己的板载浏览器上滚动Bootstrap响应表.

不同地呈现内容(例如,非表格或更改表格布局)不是我的客户的选择; 有没有办法让Razr滚动表格?

谢谢!

PS:Bootstrap自己的响应表示例在这款手机/浏览器组合中不起作用,所以我认为这可能不是首发......

android responsive-design twitter-bootstrap-3

5
推荐指数
0
解决办法
653
查看次数

可以记录Laravel Dusk测试结果吗?

Dusk为测试提供了单独的日志,这些测试在控制台中返回了失败/警告,但是我真正想要的是一个大的日志文件或报告,列出了我的Dusk脚本中每个测试的通过/失败状态。

任何人都可以提出解决方案吗?我在任何地方都找不到答案,但是似乎应该比较普遍,所以我确定我已经忽略了一些东西。

logging automated-tests laravel laravel-dusk

1
推荐指数
1
解决办法
700
查看次数