为什么Bootstrap列不能在这个小的HTML/CSS片段中工作？

Question

我希望左栏有2个单位宽,右栏有10个单位长.然而,由于一些奇怪的原因,它不是那样出来的.

谁知道为什么不呢？

#left {
  background-color: green;
}
#right {
  background-color: yellow;
}

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>

<div id="main-row" class="row">
  <div id="left" class="col-xs-2">
    <p>Yo</p>
    <button class="btn btn-primary">A Button</button>
  </div>
  <div id="right" class="col-xs-10">
    Ho
  </div>
</div>

Answer 1

您正在使用Bootstrap 3 HTML和Bootstrap 2 CSS.

将您的链接更改为:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">