段在语义 ui 中溢出容器？

Question

我最近开始学习语义ui。

问题是我不知道为什么 "segment" 宽度会溢出 "container"。

=> jsfiddle 更清楚。

还有其他解决方案吗？

除了网格系统，我也在努力填充（不触及自定义 cc）

感谢您的任何建议。

<div class="ui container">
    <header>
        <h1 class="ui huge header">Your Logo
            <span class="ui sub header">Using Single layout to create several looks</span>

        </h1>

    </header>

    <div class="ui inverted brown segment">
        <div class="ui inverted secondary  menu">
            <a class="ui brown big button">
                Home
            </a>

            <a class="ui brown big button">
                Messages
            </a>
            <a class="ui brown big button">
                Friends
            </a>
        </div>
    </div>


    <div class="ui grid">
        <div class="row">
            <div class="ui inverted  green placeholder segment column">

            </div>
        </div>

    </div>




</div>

Answer 1

该段将从容器中溢出，因为语义网格使用负边距。网格的所有边都有 -1rem 的边距，以确保弹性网格与 container.since 的外侧正确放置，网格列的两侧有一个排水沟。使用 padded grid 变体使其正常工作。 https://semantic-ui.com/collections/grid.html#negative-margins

段在语义 ui 中溢出容器？

segment overflow the container in semantic ui?

html

css

user-interface

segment

semantic-ui