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-*類應用於元素不僅會影響其在中型設備上的樣式，還會影響其在大型設備上的樣式。