Question

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

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

Todo我用过：

<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响应行？

编辑1：

1 个答案: