请教semantic ui问题，网格不缩小
如图，为什么浏览器缩小后，右边会覆盖左边的呢？
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/semantic-ui/2.0.0/dist/semantic.min.css">
<script src="css/semantic-ui/2.0.0/dist/semantic.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>Dashboard Theme | Dashboard</title>
</head>
<body>
<div class="ui sidebar inverted vertical menu">
<a class="item">
1
</a>
<a class="item">
2
</a>
<a class="item">
3
</a>
</div>
<div class="pusher">
<div class="ui stackable grid">
<div class="two wide column">
<div class="ui secondary vertical pointing menu">
<div class="item">
<div class="header">Products</div>
<div class="menu">
<a class="item active">Enterprise</a>
<a class="item">消费者</a>
</div>
</div>
<div class="item">
<div class="header">CMS Solutions</div>
<div class="menu">
<a class="item">Rails</a>
<a class="item">Python</a>
<a class="item">PHP</a>
</div>
</div>
<div class="item">
<div class="header">Hosting</div>
<div class="menu">
<a class="item">已分享</a>
<a class="item">专用的</a>
</div>
</div>
<div class="item">
<div class="header">Support</div>
<div class="menu">
<a class="item">E-mail Support</a>
<a class="item">问答</a>
</div>
</div>
</div>
</div>
<div class="fourteen wide column">
<div class="ui form">
<div class="two fields">
<div class="field error">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field error">
<label>Gender</label>
<div class="ui selection dropdown">
<div class="default text">Select</div>
<i class="dropdown icon"></i>
<input type="hidden" name="gender">
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="inline field error">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>请问什么原因，今天学习semantic ui感觉 响应式布局用起来没bootstrap 栅格那么方便。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
<div class="ui secondary vertical pointing menu">宽度是固定的，超出了<div class="two wide column">的宽度。把前者width设为100%可以看到效果。