php - Laravel + Bootstrap - 让侧边栏与内容并排

Question

我正在使用 Laravel + bootstrap 和 columns/rows 。

但是当我使用较小的屏幕时。侧边栏位于顶部，内容位于下方。

我希望他们都留在自己的位置上，而不是变小。

这就是我希望它在台式机和手机/平板电脑上的样子

这是它在手机上的显示方式:

有没有什么方法可以并排修复它们，同时让它们像 laravel 和 bootstraps 预期的那样响应。

这是基本布局。

<div id="container-fluid">

                <div class="container">

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

                        <div class="col-sm-3">

                            @yield('sidebar')

                        </div>

                        <div class="col-sm-9">

                            @yield('content')

                        </div>

                    </div>

                </div>

            </div>

Answer 1

您必须将列从 sm(小型设备，例如平板电脑)更改为 xs(超小型设备，例如手机)。

<div id="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                @yield('sidebar')
            </div>
            <div class="col-xs-9">
                @yield('content')
            </div>
        </div>
    </div>
</div>

来自 http://getbootstrap.com/css/#grid :

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.