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

Question

我正在尝试创建一个响应式网站。我过去曾经使用过twitter bootstrap并且也看过基础，但是导航菜单都不像我想的那样。

我希望看看是否有人可以推荐一个能够获得我想要的行为的框架或模板。

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

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

在手机上我希望页面显示如下：

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

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

Answer 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>

这必须有效

Answer 2

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

E.g。

.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显示移动设备的块样式。

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