课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

大家请教个问题，就是缩小的时候Toggle点击没用

来源：3-3 响应式布局之Bootstrap实际案例

why_aa

2016-05-04 17:24

大家请教个问题，就是缩小的时候Toggle点击没用，是哪里写错了吗

写回答 关注

5回答

  • TWT
    2016-05-29 11:42:45
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </form> 去除
    <a href="#" class="navbar-brand">Brand</a>
    <div class="container">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    </div>
</div>
    <div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            </div>
        </div>
        <div class="col-md-3">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Cras justo odio</a></li>
                <li class="list-group-item"><a href="#">Dapibus ac facilisis in</a></li>
                <li class="list-group-item"><a href="#">Morbi leo risus</a></li>
                <li class="list-group-item"><a href="#">Porta ac consectetur ac</a></li>
                <li class="list-group-item"><a href="#">Vestibulum at eros</a></li>
            </ul>
        </div>
    </div>
</div>
    0 0
  • 慕粉3135539
    2016-05-04 20:50:46

    还有那些div标签，写那么多没用的div没什么用吧，而且还没有闭合

    0 0
  • 慕粉3135539
    2016-05-04 20:46:36

    你的标签好乱啊，form的闭合标签是干嘛的，删掉试试

    0 1
  • why_aa
    2016-05-04 20:25:14

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width-device-widht, initial-scale=1.0">

        <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <link rel="stylesheet" href="css/bootstrap.min.css">

        <link rel="icon" href="../../favicon.ico">

        <script src="js/jquery.min.js"></script>

        <script src="offcanvas.js"></script>

        <link href="offcanvas.css" rel="stylesheet">

        <!--[if lt IE 9]>

            <script src="https://oss.maxcdn.com/libs/respond.js/a.3.0/respond.min.js"></script>


        <![endif]-->


        <title></title>


    </head>

    <body>

    <nav class="navbar navbar-inverse">

        <div>

            <!-- Brand and toggle get grouped for better mobile display -->

            <div>

            <div>

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                    <span>Toggle navigation</span>

                    <span></span>

                    <span></span>

                    <span></span>

                </button>

                <a href="#">Brand</a>

            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li><a href="#">Link <span>(current)</span></a></li>

                    <li><a href="#">Link</a></li>

                    <li><a href="#">Link1</a></li>

                </ul>

                </form>

            </div>

                </div><!-- /.navbar-collapse -->

        </div>

            <!-- /.container-fluid -->

    </nav>

    <div>

        <div>

            <div>

                <p class="pull-right visible-xs">

                    <button class="btn-xs btn btn-primary">Toggle</button>

                </p>

                <div>

                    <h1>Hello, world!</h1>

                    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                </div>

                <div>

                    <div class="col-6 col-sm-6 col-lg-4">

                        <h2>headline</h2>

                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                        <a class="btn btn-default">View detail</a>

                    </div>

                    <div class="col-6 col-sm-6 col-lg-4">

                        <h2>headline</h2>

                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                        <a class="btn btn-default">View detail</a>

                    </div>

                    <div class="col-6 col-sm-6 col-lg-4">

                        <h2>headline</h2>

                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                        <a class="btn btn-default">View detail</a>

                    </div>

                    <div class="col-6 col-sm-6 col-lg-4">

                        <h2>headline</h2>

                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                        <a class="btn btn-default">View detail</a>

                    </div>

                    <div class="col-6 col-sm-6 col-lg-4">

                        <h2>headline</h2>

                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                        <a class="btn btn-default">View detail</a>

                    </div>

                    <div class="col-6 col-sm-6 col-lg-4">

                        <h2>headline</h2>

                        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

                        <a class="btn btn-default">View detail</a>

                    </div>

                </div>



            </div>

            <div>

            <ul>

                <li>Cras justo odio</li>

                <li>Dapibus ac facilisis in</li>

                <li>Morbi leo risus</li>

                <li>Porta ac consectetur ac</li>

                <li>Vestibulum at eros</li>

            </ul>

            </div>

        </div>

    </div>

    </body>

    </html>


    0 0
  • 慕粉3135539
    2016-05-04 20:06:28

    大哥，你的代码呢

    1 0

    why_aa

    我把代码贴上去了，帮我看下那里的问题， 谢谢

    2016-05-04 20:27:28

    共 1 条回复 >

认识响应式布局

使用Bootstrap前端框架，本教程让网站兼容不同终端不再是梦

132109 学习 · 278 问题

查看课程

相似问题

没讲完啊，点击TOGGLE出现右边列表

回答 1

写最后一个按钮的时候为什么没有达到放大按钮就消失，缩小就出现而是一直都在而且是在左上角

回答 2

没有讲解点击 Toggle 后 右侧滑现导航 这个效果是怎么做出来的

回答 3

小屏幕的时候点了没有反应 求解？

回答 2

最后按钮点击效果 点击 Toggle 和 list-group 出现的效果 没效果 怎么实现啊

回答 1

打开慕课网App查看更多内容