Question

我正在使用bootstrap设计网页，div元素下有textarea，如下面的代码。

newTab = window.open();
div = document.createElement("div");
div.appendChild(picture);
newTab.document.body.innerHTML = div.innerHTML;

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

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

Answer 1

只需使用集成在bootstrap中的.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％宽度。

Answer 2

设置width: 100%将占用父级的全宽。

＆＃13;

textarea {
  width: 100%;
}

＆＃13;

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

＆＃13;

Answer 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%;
}

Answer 4

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

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

Css文件

textarea {
  width: 100%;
}

textarea在div bootstrap中100％宽度

4 个答案: