请教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 栅格那么方便。

<div class="ui secondary vertical pointing menu">宽度是固定的，超出了<div class="two wide column">的宽度。把前者width设为100%可以看到效果。

【热门文章】