Laravel + Bootstrap - 边栏与内容并排答案

【问题标题】：Laravel + Bootstrap - Keep Sidebar Side by Side with contentLaravel + Bootstrap - 边栏与内容并排
【发布时间】：2015-09-07 15:53:32
【问题描述】：

我正在使用 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>

【问题讨论】：

喜欢这个？ bootply.com/JILnkfqK3C

标签： php html css twitter-bootstrap laravel

【解决方案1】：

我想，你也可以这样玩。请注意，我只是添加临时内联 CSS。我不建议添加内联 CSS。

<div class="container">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-3">
                <div style="background-color:#9E2121; height:200px;">@yield('content')</div>
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                 <div style="background-color:#55A03D; height:600px;">@yield('content')</div>
            </div>
        </div>
    </div>
</div>

你可以看到这样的结果；

【讨论】：

【解决方案2】：

您必须将列从 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：

网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如如果.col-lg-* 类不存在，将任何.col-md-* 类应用于元素不仅会影响其在中型设备上的样式，还会影响大型设备上的样式。

【讨论】：