textarea 100% ширина в div bootstrap

Question

Я использую bootstrap для создания веб-страницы, и есть текстовое поле под элементом div, как показано ниже.

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

Я хочу, чтобы текстовое поле, чтобы принимать родительские элементы шириной автоматически, я попытался с помощью наследует ширину, но это не помогает.

Как это сделать, пожалуйста, помогите мне.

Answer 1

Установка 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>

Answer 2

Просто используйте .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>

Это настройка ширины 100% от родительского дел.

Answer 3

Здесь вы идете. http://jsfiddle.net/mjh8jme7/ Текстовое поле наследует ширину 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%; 
}