如何在调整大小的同时排列标签和文本框？

Question

我对屏幕大小有问题。下面的代码在全屏上看上去很好，但是如果我调整一下窗口的大小，它就会开始关闭，而且非常糟糕。我通过了引导4网格布局教程，它给我的问题。

目前它只显示在全屏上；从: 01/01/2010到12/18/2018

屏幕第二次调整大小，如下所示

出发地:2010年1月1日至

2018年12月18日

如果屏幕大小不是全屏，它需要看起来像这样，并停留在那里，直到最小的屏幕大小。

出发地:2010年1月1日

至:2018年12月18日

我知道在网格系统中，它是基于大、中、小、xtra小的。然而，对我来说，除了全屏以外的任何东西都是中等或更低的。

<div class="row">
        <div class="col">
            <label for="fromUploadDate text-muted">From:</label>
        </div>
        <div class="col">
            <kendo-datepicker></kendo-datepicker>
        </div>
        <div class="col">
            <label for="toUploadDate text-muted">To:</label>
        </div>
        <div class="col">
            <kendo-datepicker></kendo-datepicker>
        </div>
    </div>

Answer 1

这个应该会有帮助你出局了。您只需要使用官方引导文档中的一个选项向col的末尾添加一点内容。clearfix应该将所有内容分解为2行。例如：

<div class="row">
 <div class="col-2">
  <label for="fromUploadDate text-muted">From:</label>
 </div>
 <div class="col-2">
  <kendo-datepicker></kendo-datepicker>
 </div>
 <div class="clearfix"></div>
 <div class="col-2">
  <label for="toUploadDate text-muted">To:</label>
 </div>
 <div class="col-2">
  <kendo-datepicker></kendo-datepicker>
 </div>
</div>

编辑: 2018-12-20

<div class="container">
 <div class="row col-sm-7">
  <div class="col">
   <label for="fromUploadDate text-muted">From:</label>
  </div>
  <div class="col">
   <kendo-datepicker></kendo-datepicker>
  </div>
 </div>
 <div class="row col-sm-7">
  <div class="col">
   <label for="toUploadDate text-muted">To:</label>
  </div>
  <div class="col">
   <kendo-datepicker></kendo-datepicker>
  </div>
 </div>
</div>