响应式 Web 导航菜单（带图像）答案

【问题标题】：Responsive Web Navigation Menu (with images)响应式 Web 导航菜单（带图像）
【发布时间】：2014-02-13 12:04:40
【问题描述】：

我正在尝试创建一个响应式网站。我过去使用过 twitter bootstrap 并且还研究了基础，但是导航菜单的行为都不像我想要的那样。

我正在寻找是否有人可以推荐一个框架或模板来获得我想要的行为。

基本上 - 这就是我的菜单在最大化浏览器上的显示方式：

单击链接旁边的彩色矩形也将导航到所需的页面。

在移动设备上，我希望页面显示如下：

网站徽标会根据手机屏幕大小动态调整大小 - 彩色矩形也是如此 - 但主要思想是，当屏幕达到一定宽度时，“全视图”上的链接旁边的文本会消失，矩形会移至页面徽标下方。

所有响应式 Web 模板和框架似乎都更喜欢“折叠菜单”方法，我认为这只是添加额外的触摸或单击以执行特定功能。

【问题讨论】：

这可以通过引导程序实现，你必须使用col-xs-*，如果你能显示你的代码可以帮助你。

标签： twitter-bootstrap mobile navigation responsive-design zurb-foundation

【解决方案1】：

    <div class="col-md-4 col-xs-12">Site Logo</div>
    <div class="col-md-2 col-xs-3">Link A</div>
    <div class="col-md-2 col-xs-3">Link B</div>
    <div class="col-md-2 col-xs-3">Link C</div>
    <div class="col-md-2 col-xs-3">Link D</div>

这必须有效

【讨论】：

【解决方案2】：

如果你的样式合适，第一个答案会起作用。

例如

.colmd4  {
  width: 50%'
  display: inline;
  padding: 0;
  }

.col-md-2 {
  width: 12%;
  display: inline;
  padding: auto;

请记住，手指是钝的，在屏幕宽度上放置 4 件物品大约是您可以打包它们的距离。

另一种方法可以做到这一点，假设相同的 5 个 div。

@media screen and (min-width:600px){
    div {
        display: inline;
        padding: 2em;
        }
    }

这将假定 div 显示移动设备的块样式。

额外的填充使它们成为手指的更大目标。

【讨论】：