使用语义 UI 将垂直菜单附加到分段

Question

如何使用 Semantic-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

我希望垂直菜单附加到该段（就像使用水平菜单时一样）。

Answer 1

grid ui我认为你可以制作一个小的覆盖 css 类来修改默认值和类中的一些内容menu来制作你想要的内容。这是一个代码示例，仅包含第一个网格 ui 示例： http: //codepen.io/Nasir_T/pen/dOGGro