Question

我在调整屏幕尺寸时遇到问题。下面的这段代码在全屏上看起来不错，但是如果我调整窗口大小只是一个smidgen，它就会开始看起来很糟糕。我经历了bootstrap 4网格布局教程，这给了我一个问题。

目前，它只能在全屏模式下显示；从：[2010年1月1日]到：[2018年12月18日]

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

从：[2010年1月1日]到：
[12/18/2018]

如果屏幕尺寸调整为全屏以外的任何尺寸，则需要看起来像这样并保持在那里直到最小的屏幕尺寸。

来自：[2010年1月1日]
收件人：[2018年12月18日]

我知道在网格系统中它基于大型，中型，小型，超小型。但是，除了全屏之外，我的视线都中等或更低。

<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

这should help个你出来了。您只需要使用官方Bootstraps文档中的选项之一在col的末尾添加一些内容即可。 clearfix应该将所有内容分成两行。例如：

<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>

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

1 个答案: