桌面上的垂直导航栏和带有bootstrap3的移动设备上的水平导航栏3

Question

我正在设计一个基本上是桌面上垂直的导航栏和移动设备上的水平导航栏。

桌面：

移动：

我的基本想法是使用媒体查询来为移动设备构建内联块：

@media (min-width: @screen-sm-min) {
  .fluid-inline{
    display: inline-block;
  }
}

我怀疑是标记。

我知道它应该是以下几行：

<div class="container-fluid">
    <div class="row fluid-inline">
        <div class="col-xs-3 col-sm-12">one</div>
        <div class="col-xs-3 col-sm-12">two</div>
        <div class="col-xs-3 col-sm-12">three</div>
    </div>
    <div class="map-container row fluid-inline">
        <div id="map" class="">

        </div>
    </div>
</div>

这是以某种方式工作但破坏了，破坏的部分是地图容器，可能与内联行有关吗？

尝试过这样的事情：

<div class="col-sm-12">
    <div id="map" class="">

    </div>
</div>

但也不确定。

所以我的问题基本上是关于boostrap标记应该是什么，应该是什么行，以及我必须使用的cols。

Here is a live example.

请注意，此标记不是明确的，我正在寻找的是正确的标记，因此请不要犹豫重组。

另外，我并不真正需要实际代码，正确结构的想法应该足够了。

Answer 1

这个结构怎么样？

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
            <ul class="my-menu">
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
            </ul>
        </div>
        <div class="col-xs-12 col-sm-11 col-md-11 col-lg-11">
            <div class="map-container">
                <div id="map"></div>
            </div>
        </div>
    </div>
</div>

1. 我不认为将导航项放在bootstrap的col-x-n类中是个好主意。你应该为它们使用一个简单的li，然后设置它们的样式。
2. 您的地图不一定需要另外row，这实际上就是您的问题所在。相反，您应该定义另一个col并根据屏幕大小使用col-x-n类对其进行操作。

当单个col-x-12中有两个row个类时，该页面会将它们相互堆叠（您需要在移动设备上使用，导航到顶部，在底部映射）。

以下是 demonstration 。