无法让列适合网格宽度
Can't get columns to fit grid width
我正在使用语义 UI,但无法正确设置网格。根据文档,Semantic UI 使用 16 列,我试图在左侧有一个宽度为 three
的列,旁边是一个宽度为 thirteen
的列.这是它的样子(图片被裁剪):
我已经使用 Bootstrap 很长时间了,现在正在尝试使用语义 UI。我错过了什么? Demo
<header>
<div class="mobile hidden">
<div class="ui container">
<div class="ui grid">
<div class="eight column">
<div class="ui secondary menu">
<a class="active item">
Home
</a>
<a class="item">
Messages
</a>
<a class="item">
Friends
</a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item">
Logout
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="clearing"></div>
<div class="ui container">
<div class="mobile hidden">
<div class="ui grid row">
<aside class="three column red">
</aside>
<section class="thirteen column olive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente!
</section>
</div>
</div>
</div>
您的 HTML
元素中缺少两个额外的 类 wide
和 field
。改变如下
<aside class="three wide field column red"></aside>
<section class="thirteen wide field column olive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente!
</section>
我正在使用语义 UI,但无法正确设置网格。根据文档,Semantic UI 使用 16 列,我试图在左侧有一个宽度为 three
的列,旁边是一个宽度为 thirteen
的列.这是它的样子(图片被裁剪):
我已经使用 Bootstrap 很长时间了,现在正在尝试使用语义 UI。我错过了什么? Demo
<header>
<div class="mobile hidden">
<div class="ui container">
<div class="ui grid">
<div class="eight column">
<div class="ui secondary menu">
<a class="active item">
Home
</a>
<a class="item">
Messages
</a>
<a class="item">
Friends
</a>
<div class="right menu">
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search...">
<i class="search link icon"></i>
</div>
</div>
<a class="ui item">
Logout
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="clearing"></div>
<div class="ui container">
<div class="mobile hidden">
<div class="ui grid row">
<aside class="three column red">
</aside>
<section class="thirteen column olive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente!
</section>
</div>
</div>
</div>
您的 HTML
元素中缺少两个额外的 类 wide
和 field
。改变如下
<aside class="three wide field column red"></aside>
<section class="thirteen wide field column olive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente!
</section>