Question

我是新的Bootstrap，并且一直试图了解文档，但发现它有点令人困惑。我的页面有三个块：主标题，侧面导航和主要内容。我可以轻松地使用CSS进行布局，但我使用的是Bootstrap，并希望使用它来进行响应式布局。在常规屏幕上我希望它如下（其中标题占全宽）：

[HEADER]
[NAV][MAIN]

然后在小屏幕上：

[HEADER]
[NAV]
[MAIN]

但是在小屏幕上，我希望导航能够崩溃。我的导航是“nav nav-list bs-docs-sidenav”，我不知道如何通过它获得这种效果。

非常感谢您的帮助。

这是html。并不是说它能为您提供更多信息。

<body>
    <header>
        <h1>title</h1>
    </header>
    <nav>
        <ul id="nav" class="nav nav-list bs-docs-sidenav" >
            <li><a class="parent">item 1</a>
                <ul class="bs-docs-sidenav" style="display:none;">
                            <li>
                                <a href="#">
                                    subitem 1
                                </a>
                            </li>
                    </ul>
                </li>
            <li><a href="#">item 2</a></li>
        </ul>
    </nav>
    <main class="content">
        <p>content</p>
    </main>
</body>

Answer 1

答案是使用col- - 这将告诉您块在不同大小的屏幕上应占用多少列。仍然希望菜单框在小屏幕上缩小为1个项目，但这已经足够了。

<header class="row col-xs-12">
</header>
<nav class="row col-xs-12 col-sm-4 ">
</nav>
<main class="row col-xs-12 col-sm-8">
</main>

在bootstrap中创建响应式布局

1 个答案: