css - 骨架框架-四栏位

Question

我刚开始建立一个有四列的网站 index.html。出于某种原因，当我测试和调整浏览器大小时，列在平板电脑大小上会分解。（最后一栏刚刚下降）

我做错了什么:-)

到目前为止，这是我的简单代码：

    <header><!-- Header osuus -->

    <div class="four columns"> <a href="http://www.nhl.com"><img src="images/logo.png"   
width="220" height="33" class="scale-with-grid" style="margin-top: 119px;"></a></div>

    <!-- Navikaatio -->

    <div class="eleven columns offset-by-one">
    <nav class="nav">
        <ul class="nav-list">
                    <li class="nav-item"><a href="#">Yritys</a></li>
                    <li class="nav-item"><a href="#">Työkalut</a></li>
                    <li class="nav-item"><a href="#">Ylläpito</a></li>
                    <li class="nav-item"><a href="#">Kehitys</a></li>
                    <li class="nav-item"><a href="#">Pilvi</a></li>
                </ul>
    </nav>
    </div>

    </header><!-- Header päättyy -->


            <div class="section">

                <div class="four columns">
                <div class="inner">
                dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf
                </div>
                </div>

                <div class="four columns">
                <div class="inner">
                dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf
                </div>
                </div>

                <div class="four columns">
                <div class="inner">
                dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf
                </div>
                </div>

                <div class="four columns">
                <div class="inner">
                dfdfgdfgdf dfg dfg dfg dfg dfg dfgdfgd dfg dfg dfg dfgdfgfdgdf
                </div>
                </div>


            </div>  

</div><!-- container -->


css for inner class:

.inner {
height: 339px;
width: 100%;
background-color: #707070;
margin-top: 105px;
text-align:left;
}

// 米卡

Answer 1

Skeleton 要求您将所有内容包装在一个容器中，并将所有列包装在一行中。我想这可能是你的问题。所以：

<div class="container">
  <div class="row">
    // columns here
  </div>  
</div>

Answer 2

我认为您需要将四列 div 包装在一个.containerdiv 中。我认为这就是 Skeleton 的工作方式，不是吗？