Question

我最近开始使用bootstrap 3，我真的很喜欢网格系统。然而，我无法尝试实现以下布局。

Layout

是否可以使用bootstrap创建类似的东西？我已阅读有关列包装的文档，这是要走的路吗？ 实现目标的最佳方法是什么？

Answer 1

人们在使用bootstrap时经常会忘记的是它是完全可定制的。只要你的css代码在bootstrap之后，就可以使用你自己的css来定义和定位div。

这与您要实现的目标类似：fiddle

<div id="wrapper" class="">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
            <li>
                <a href="#">Overview</a>
            </li>
            <li>
                <a href="#">Events</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Simple Sidebar</h1>
                    <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                    <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>

Answer 2

我不认为你只能用bootstrap来做。您应该使用https://github.com/desandro/masonry来解决这个问题。

Bootstrap使用float来定位你的列，而Masonry计算绝对位置以将div放在正确的位置。

您仍然可以使用Bootstrap来定义列的响应行为（宽度适当性）

Bootstrap 3，不同高度的列布局？

2 个答案: