这是我第一次尝试语义ui。
我遇到了这个问题:
我的标签使身体移动,这很烦人,我无法找到任何解决方案。我看了一下doc,甚至还有一些例子被打破了:/
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>
祝你好运
答案 0 :(得分:0)
问题在于,样式表sematic.min.css
正在添加如下所示的类。
.ui.segment[class*="bottom attached"]:last-child {
margin-bottom: 0;
}
仅删除最后一个元素的边距。因此,您正面临着这个问题。
最简单的解决方法是,添加另一个具有相同名称的类并设置默认边距和边框,如下所示,但将!important
添加到CSS属性中!这样它就不能被sematic.min.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样式。
但这是一个非常小的改变,我猜是可以忽略的!