div bootstrap中的textarea 100％宽度[重复]

Posted 2023-05-07

【中文标题】div bootstrap中的textarea 100％宽度[重复]

【英文标题】：textarea 100% width in div bootstrap [duplicate]

【发布时间】：2015-11-05 00:49:42

【问题描述】：

我正在使用引导程序来设计网页，并且在 div 元素下有 textarea 如下代码。

<div class="tab-pane" id="orange">
<div class="col-md-12">
    <div class="row">
    <div class="col-md-12 col-md-offset-0">
        <div class="form-group">
        <textarea name="taskDescription" rows="2" class="form-control" id="txtDescription" required="required"></textarea>
        </div>
    </div>
    </div>
</div>

我想让 textarea 自动获取父元素的宽度，我尝试使用继承宽度但没有帮助。

如何做到这一点，请帮助我。

【问题讨论】：

我已经编辑了我的问题并发布了实际代码

让我澄清一下，我不想在引导 css 中进行任何更改，请发布一些其他可能的选项。

即使没有修改，您的代码也会占用 100%。这有什么问题？

人们开始投票，他们至少应该等待我对重复链接的回复，我没有找到解决方案，这就是我在这里发布问题的原因，甚至在下面测试了可以使用小提琴但没有的答案在我的代码中工作。

我将设置 fiddle 并尝试在那里解释我的问题。

【参考方案1】：

只需使用 .form-control 类，它集成在引导程序中

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-12">
  <textarea rows="2" class="form-control"></textarea>
</div>

它设置了父 div 的 100% 宽度。

【参考方案2】：

设置width: 100% 将占据父级的整个宽度。

textarea 
  width: 100%;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="col-md-12">
  <textarea rows="2"></textarea>
</div>

【讨论】：

我删除了答案，因为我没有使用内置的 Bootstrap 类，但也看到了对其他答案的投票。怎么回事？

【参考方案3】：

给你。 http://jsfiddle.net/mjh8jme7/textarea继承了div的宽度，不会溢出。

<div class="col-md-12">
    <textarea rows="2"></textarea>
</div>

.col-md-12 textarea 
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
        box-sizing: border-box;
     width: inherit;


.col-md-12 
    width:100%;

【参考方案4】：

width: 100% 将占据父级的全宽。

<div class="col-md-12">
  <textarea rows="2"></textarea>
</div>

CSS 文件

textarea 
  width: 100%;

【讨论】：

我不想编辑引导 css。

请参考jsfiddle.net/Z4CyF/7