bootstrap - 组件调整大小问题

Question

我是 UI 设计界的新手。我正在尝试建立一个基本页面 & 运行 bootstrap。我所追求的是使用 bootstrap 的根本原因，即根据加载网页的设备来缩放页面及其组件。我只是因为这个要求而失败了:)

这是我正在尝试运行的代码

            <div class="container-fluid">
           <div class="row-fluid ">
                <div class="row row-eq-height ">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
                        <a  id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1 " style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
                    </div>
                    <div class="col-xs6 col-sm-6 col-md-6 col-lg6 bg-primary">
                        <div class="page-header text-center" >
                            <p> <h2>BOOTSTRAP TRIAL </h2> </p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
                        <h3> LOGGED IN</h3>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg- bg-primary text-right pull-right">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Messages <span class="badge pull-right blue"> 42 </span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="logout.php">Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></a></li>
                                </ul>
                            </li>
                        </ul>                               
                    </div>
                </div>
            </div>
            </div>

此代码不会重新调整正在加载的网页的所有内容的大小。当我点击浏览器的 "restore" 按钮时，我只看到了一半的内容。

几个问题

1) 我对 bootstrap 的理解是它是移动优先技术的意思，如果我们要为小型设备开发，那么它可以扩展到任何大型设备。如果我误解了这一点，请纠正我。因此，是否必须指定 -xs-、-md- & -lg-所有有问题的元素都可以重新调整大小或指定 -xs- 就足够了吗？如果不是，我应该指定其中的哪一个，以便在任何设备上自动进行缩放。

2) 响应式网页设计只是处理内容大小调整吗？

如果能帮我搬到这里，我将不胜感激。

Answer 1

你能检查一下这个代码吗

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
           <div class="row-fluid">
                <div class="row row-eq-height">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
                        <a  id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
                        <div class="page-header text-center" >
                            <p> <h2>BOOTSTRAP TRIAL </h2> </p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
                        <h3> LOGGED IN</h3>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary text-right pull-right">
                        <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Messages <span class="badge pull-right blue"> 42 </span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></a></li>
                                    <li class="divider"></li>
                                    <li><a href="logout.php">Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></a></li>
                                </ul>
                            </li>
                        </ul>                               
                    </div>
                </div>
            </div>
            </div>

bootstrap - 组件调整大小问题

bootstrap - components resize issues

html

resize

twitter-bootstrap-3