Laravel + Bootstrap - 与内容并排保留侧边栏

Question

我正在使用Laravel + bootstrap与列/行。

但是，当我使用一个较小的屏幕。侧边栏放置在顶部和下面的内容。

我希望他们俩都留在自己的位置，变得更小。

这是我希望它看起来既在桌面上&手机/平板电脑

这是它如何出现但是在手机上：

有什么方式来并排修复它们，但保持它们的响应性，就像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

我想，你也可以这样玩。请注意，我只是添加临时内联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> 

你可以看到那样的结果;

Answer 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-*类应用于元素不仅会影响其在中型设备上的样式，还会影响其在大型设备上的样式。