时间戳

首页 > 解决方案 > 剑道对话框未扩展到引导程序 4 表单组的宽度

css - 剑道对话框未扩展到引导程序 4 表单组的宽度

问题描述

我有一个带有简单文本输入的 bootstrap 4 表单组。我在剑道对话框中使用它，但是对话框不会自动扩展，因此标签的文本和输入都在一行上。我玩过 CSS，但不知道是什么导致了这个问题。请参阅下面的道场链接。

https://dojo.telerik.com/EQuwayex

标签： csskendo-uitelerikbootstrap-4

解决方案

您可以将“测试” div 更改为以下。我为标签设置了一个固定值，然后将文本框 div 减少到 col-md-6。

  <div id="test">
    <div class="container">
      <div class="form-group row">
        <label style="width:100px" class="col-form-label">Display Text</label>
        <div class="col-md-6">
          <input type="text" class="displayText form-control" />
        </div>
      </div>
    </div>
  </div>

如果您想控制对话框的宽度，可以向 Dev 元素添加宽度，然后更改文本框 div 元素的宽度。

  <div id="test" style="width:700px">
    <div class="container">
      <div class="form-group row">
        <label style="width:100px" class="col-form-label">Display Text</label>
        <div class="col-md-9">
          <input type="text" class="displayText form-control" />
        </div>
      </div>
    </div>
  </div>

推荐阅读