セマンティックUIを使用してセグメントに垂直メニューを添付

Question

セマンティックUI CSSフレームワークを使用してセグメントに垂直メニューを追加するにはどうすればよいですか？ドキュメントに記載されているマークアップを使用すると、コンテンツとメニューの間にマージン（グリッドパディングの結果）が表示されます。グリッドを使用していない場合、境界線は収まりません。

<div class="ui grid"> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <!-- Overlapping border --> 
      <div class="ui horizontal segments"> 
       <div class="ui vertical tabular menu"> 
        <a class="active item">Bio</a> 
        <a class="item">Pics</a> 
        <a class="item">Companies</a> 
        <a class="item">Links</a> 
       </div> 
       <div class="ui segment"> 
        This is an stretched grid column. This segment will always match the tab height 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <!-- Margin between the elements --> 
     <div class="four wide column"> 
      <div class="ui vertical fluid tabular menu"> 
       <a class="active item">Bio</a> 
       <a class="item">Pics</a> 
       <a class="item">Companies</a> 
       <a class="item">Links</a> 
      </div> 
     </div> 
     <div class="twelve wide stretched column"> 
      <div class="ui segment"> 
       This is an stretched grid column. This segment will always match the tab height 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <!-- Margin between the elements --> 
     <div class="four wide column"> 
      <div class="ui vertical fluid menu"> 
       <a class="active item">Bio</a> 
       <a class="item">Pics</a> 
       <a class="item">Companies</a> 
       <a class="item">Links</a> 
      </div> 
     </div> 
     <div class="twelve wide stretched column"> 
      <div class="ui segment"> 
       This is an stretched grid column. This segment will always match the tab height 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="sixteen wide column"> 
      <!-- Overlapping border --> 
      <div class="ui horizontal segments"> 
       <div class="ui vertical menu"> 
        <a class="active item">Bio</a> 
        <a class="item">Pics</a> 
        <a class="item">Companies</a> 
        <a class="item">Links</a> 
       </div> 
       <div class="ui segment"> 
        This is an stretched grid column. This segment will always match the tab height 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JSFiddle

Iは、垂直メニュー（水平メニューを使用する場合のような）セグメントに接続されていることを期待します。

Answer 1

私はあなたが欲しいものを作るために、デフォルトgrid uiとmenuクラスでいくつかのことを修正する小さなオーバーライドCSSクラスを作ることができると思います。ここでは最初のグリッドの例だけのコードサンプルを示します。http://codepen.io/Nasir_T/pen/dOGGro