Bootstrap 没有脚手架的响应式行？

Question

我想构建一个宽度约为 460px 且有 2 列的网页。像这样：

| TITLE OF AN ARTICLE ....       | DATEOFARTICLE |

我用过的方法：

<div className="container-fluid">
      <div className="row">
         <div className="col-sm-8">NAME OF ARTICLE</div>
         <div className="col-sm-4">JUNE 6</div>
      </div>
</div>

但是在 760PX 处的柱子脚手架并没有缩小，例如在 760PX 处它看起来像这样有足够的空间：

| TITLE OF AN ARTICLE ....           |                    DATEOFARTICLE |

但是当宽度变为 < 760px 时，它看起来像脚手架，最终看起来像这样：

| TITLE OF AN ARTICLE ....               WHITESPACE?!             |
| DATEOFARTICLE                          WHITESPACE?!             |

他们是一大堆空白。他们是让 bootstrap 不是脚手架的方法吗？

所以基本上不是脚手架，就像上面的例子一样，我希望它缩小成这样：

| TITLE OF AN ARTICLE ....       | DATEOFARTICLE |

编辑 1：

我更改了我的代码以使用 container-fluid，它仍然做同样的事情：

<div className="container-fluid">
   <div className="row">
        <div className="col-sm-9 col-md-6">
             Name...
        </div>

        <div className="col-sm-3 col-md-6">
             Jan 7
         </div>
    </div>
 </div>

Answer 1

尝试使用特小号类 col-xs-*

<div class="container-fluid">
      <div class="row">
         <div class="col-xs-8">NAME OF ARTICLE</div>
         <div class="col-xs-4">JUNE 6</div>
      </div>
</div>

这是一个 JSFiddle
https://jsfiddle.net/zo8d93yq/

Bootstrap 没有脚手架的响应式行？

Bootstrap responsive rows without scaffolding?

css

twitter-bootstrap

responsive

编辑 1：