css - 在没有脚手架的情况下 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/