折りたたまれていないFoundation 6の固定幅のサイドバー

Question

サイドバーのサイズを修正するレイアウトで作業していますが、そのデザインではその要素の圧迫はうまく処理されませんが、サイドバーには手はさまざまなnav要素でいっぱいです）。私はMiko hereの助言に従っています。私はこれが基礎5のためであることを知っていますが、私はすべての行にcollapseクラスを追加しなければならない点を除いてうまくいきました。私はまだ私の排水溝が基礎によって維持されることを望む。私はそれをテストするためにさまざまな色の束と模範的なレイアウトを作成しました。

.section { 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 
@media (max-width: 600px) { 
 
    .section { 
 
    max-width: 1024px; 
 
    } 
 
    .section.sidebar-left { 
 
    padding-left: 335px; 
 
    } 
 
} 
 

 
.sidebar { 
 
    position: absolute; 
 
    min-width: 335px; 
 
    top: 0; 
 
} 
 

 
.sidebar.sidebar-left { 
 
    left: 0; 
 
}

<div class="section sidebar-left story-grid"> 
 
    <div class="sidebar show-for-large sidebar-left" style="height: 100%; background-color: green;">Sidebar</div> 
 
    <div class="row collapse" style="background-color: orange;"> 
 
     <div class="row collapse" style="height: 50px; background-color: blue;">Full Width</div> 
 
     <div class="row collapse"> 
 
      <div style="height: 50px; max-width: 355px; background-color: pink;">Fixed Width</div> 
 
     </div> 
 
     <div class="row collapse"> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
      <div class="columns small-1" style="height: 50px; background-color: purple;">1 Column</div> 
 
     </div> 
 
     <div class="row collapse"> 
 
      <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> 
 
      <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> 
 
      <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> 
 
      <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> 
 
      <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> 
 
      <div class="columns small-2" style="height: 50px; background-color: red;">2 Columns</div> 
 
     </div> 
 
     <div class="row collapse"> 
 
      <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> 
 
      <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> 
 
      <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> 
 
      <div class="columns small-3" style="height: 50px; background-color: brown;">3 Columns</div> 
 
     </div> 
 
     <div class="row collapse"> 
 
      <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> 
 
      <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> 
 
      <div class="columns small-4" style="height: 50px; background-color: crimson;">4 Columns</div> 
 
     </div> 
 
     <div class="row collapse"> 
 
      <div class="columns small-6" style="height: 50px; background-color: darkcyan;">6 Columns</div> 
 
      <div class="columns small-6" style="height: 50px; background-color: darkcyan;">6 Columns</div> 
 
     </div> 
 
    </div> 
 
</div>

story-gridクラスは、変更フォントの色を除いて何もしないし、デモの目的のために、いくつかの高さを追加します。結果はこれです：

これはほぼ正確に私が欲しいものを除いて - 私はまだ雨どいをしたいです。

私は内部グリッド・システムはそれを親の境界をオーバーフローされる方法を示すために、コンテンツ部分の上にホバリングしています：私はcollapseクラスを削除した場合、それはこのようになります。だから私は排水溝を崩壊させずに上記の結果を得ることができますか？

Answer 1

私はこれを動作させることができました。 collapseをすべてから削除してこれをあなたのCSSに追加します.row .row { margin: 0; } Foundationはネストされた行にマイナスのマージンを追加し、画面の幅に応じて変化しますが、達成したいことによってはこれができます。

投稿を@mediamax-width: 600px〜min-width: 600pxから編集しました。スクリーンショットのように見えなかったためです。