时间戳

首页 > 解决方案 > 如何配置 Bootstrap textarea 元素以垂直填充父 div？

html - 如何配置 Bootstrap textarea 元素以垂直填充父 div？

问题描述

我正在使用引导程序和纯 HTML CSS。我有一个<div>标签，其中包含 2 个 div，其中第一个<div>有 aBootstrap form-group和 a btn-primary。我希望文本输入的表单垂直扩展以填充它所在的可用高度，在下面的示例代码中是. 目前，我使用的样式属性设置不适合/填充垂直方向的 div 。水平宽度似乎工作正常。<div>class="rightupper"textareastyle="height: 30vh;"

HTML 代码：

<div class="right">
        <div class="rightupper">
            comments:
            <hr>
            <div class="form-group">
                        
                <textarea class="form-control w-100" style="height: 30vh;" id="descriptionInput" rows="3"></textarea>
            </div>
            <button class="btn btn-primary" type="button">Click Btn</button>

        </div>    
        <div class="rightlower">
            out text
            <hr>
        </div>
    </div>
</div>

应该如何更改<div class="form-group">or以垂直适合/填充包含的 div？<textarea class="form-control w-100" style="height: 30vh;" id="descriptionInput" rows="3">

这是这些 div 的相关 CSS；


.right {
  height: 100vh;
  width: 20%;
  border: 2px solid blue;
}
.rightupper {
  height: 50vh;
  width: 100%;
  background-color: rgb(190, 190, 190);
}
.rightlower {
  height: 50vh;
  width: 100%;
  background-color: rgb(190, 190, 190);
  border-top: 5px solid blue;
}

标签： htmlcsstwitter-bootstrapbootstrap-4textarea

解决方案

我准备了2种方法。

第一个是一个简单的解决方法。

首先是将焦点从宽度的 20% 更改为 col-3，Bootstrap 将其识别为 ~ 20%。这使您在分辨率变化时更容易调整宽度。在示例中，我包括在降低分辨率时，使用 50% 的宽度。您可以稍后更改。

为了占据 100% 的空间（或者更确切地说是 60% 为标题和按钮留出空间），我包含了 css .form-group 以引用所指示的内容和利用的 textarea (#descriptionInput) 的标签前一个 div 的空间的 100%。

我不太喜欢这种方法，因为分辨率的变化需要调整高度。你必须用断点解决。

运行代码

第二种方法是基于FLEX的。

在这种方法中，我使用了 bootstrap 4 中自然包含的 flex。

这个想法是创建区域，您可以在其中配置 flex 定位对象的操作以及分辨率何时更改。

Flex 遵循父子概念。因此，如果您向父级声明 flex，会发生什么是您配置子级将如何响应。

如果你注意到了，我包含了类（title、text 和 bot）来为它们的行为提供单独的配置。我在css中包含了一些设置，使得：textarea占用了1005的空间，其余的只占用了5vh。

通过这种方式，您可以将其配置为不同的分辨率，它会根据分辨率调整高度。

运行代码

有关此类方法的更多详细信息，您可以查看链接

祝你好运！

推荐阅读