Html 基础对齐嵌套div 学习响应设计和Zurb基金会。< /P>

两个内部div（绿色和红色）没有响应。目前的设计只是在大屏幕上显示它们必须是什么样子。应采取哪些措施使其响应。 另外，我不确定在较小的屏幕上显示红色div的最佳方式是什么

HTML:

<div>
        <div class="row fullWidth">
            <div class="twelve columns banner">
              <div class="logo">
                   Median Solutions</div>
              <div class="settings">
                   Hello Admin &nbsp;&nbsp;|
                   &nbsp;&nbsp;<a>Change Password</a>
                   &nbsp;&nbsp;|&nbsp;&nbsp;<a>Logout</a>
              </div>                    
            </div>
        </div>
    </div>

*
{
    margin:0;
    padding:0;
}
.fullWidth
{
  width:100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}
.banner
{
    background:lightgray;
    height:60px;
}
.logo
{
    color:White;
    font-size:20px; 
    line-height:60px;    
    width:190px;
    border:1px solid green;
    float:left;   
}
.settings
{
    float:right;
    line-height:60px;
    color:White;
    width:310px;
    border:1px solid red;
}
 @media all and (max-width: 510px) 
 {
  .banner{height:auto; text-align:center;}
  .settings,
  .logo{float:none; display:inline-block;}
 }

编辑：

现在在某个宽度处看起来是这样的：

---

正如阿德里安所提到的，下拉列表是最好的，但您也可以这样做：

---

最好的解决方案：用更小的屏幕替换它，使用什么版本的基础？由于网格类在最新版本中有所不同，我已经更新了它在一定长度上的快照。不要认为它是有反应的，是吗。这两个div也应该有类似行/列的基础类，我想……但不知道怎么办？如果你把我的媒体查询扔到你的CSS文件的底部，它应该修正你的问题。它的建议是这样的。看起来样式没有被应用，你可能必须更深地瞄准这些类。你有没有办法发布更多的代码？事实上，这就是我所有的代码。刚开始浏览网页。所以这就是全部。。。图中的另一块是测试，现在不在了。你在使用基金会吗？如果您在浏览器中尝试该代码，您会发现它一点也不好看

@media all and (max-width: 510px) {
    .banner{height:auto; text-align:center;}
    .settings,
    .logo{float:none; display:inline-block;}
}