标签移动 body

Question

这是我第一次尝试 semantic-ui。

我遇到了这个问题：

我的选项卡进行 body 移动，这很烦人，我找不到任何解决方案。我看了一下文档，甚至有些例子也坏了：/

HTML:

<div class="ui middle aligned center aligned grid">
<div class="column">
    <h2 class="ui teal image header">
        <img src="app/assets/images/logo.png" class="image">
        <div class="content">
            Log-in to your P4$Q account
        </div>
        <img src="app/assets/images/logo.png" class="image">
    </h2>
    <div class="ui large form">
        <div class="ui segment" style="background-color: #2b2b2b;">
            <div class="ui secondary pointing menu">
                <a class="active item" data-tab="first">
                    Home
                </a>
                <a class="item" data-tab="second">
                    Messages
                </a>
                <a class="item" data-tab="third">
                    Friends
                </a>
                <div class="right menu">
                    <a class="ui item">
                        Logout
                    </a>
                </div>
            </div>
            <div class="ui bottom attached active tab segment" data-tab="first">
                First
            </div>
            <div class="ui bottom attached tab segment" data-tab="second">
                Second
            </div>
            <div class="ui bottom attached tab segment" data-tab="third">
                Third
            </div>
        </div>
    </div>
</div>

此致

Answer 1

我检查了 fiddle。请在下方找到有效的 JSFiddle。

JSFiddle Demo

问题是，样式表 sematic.min.css 在下方添加 class，如下所示。

.ui.segment[class*="bottom attached"]:last-child {
    margin-bottom: 0;
}

这是单独删除最后一个元素的边距。因此你遇到了这个问题。

最简单的解决方法是，添加另一个具有相同名称的 class 并设置默认边距和边框，如下所示，但将 !important 添加到 CSS 属性！这样它就不会被 sematic.min.css

中存在的相同 CSS 覆盖

.ui.segment[class*="bottom attached"]:last-child {
    margin-bottom:1rem !important;
}

我写这个答案是基于 sematic.min.css 不需要更改的意见，否则如果您愿意修改 sematic.min.css，您只需要在文本编辑器中打开文件并设置值同上，但 !important 不是必需的，因为我们在源代码本身进行修改！

由于 CSS.

，似乎有非常小的变化

.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
    border-top: none;
}

要解决此问题，您需要转到 sematic.min.css 并删除此 CSS 样式。

但这是一个非常小的变化，我想可以忽略！

标签移动 body

Tabs moving body

jquery

semantic-ui