Размер коробки: бордюр; не влияет на текстовую область

Question

Я искал способ измерить textarea в соответствии с остальной частью моего макета и наткнулся на метод размеров коробки. Я, вероятно, не использовал это правильно, потому что это не работает для меня. У меня есть макет, который показывает 3 разных ряда. В средней строке должно отображаться поле для ввода текста, а ниже - все последние сообщения. Теперь я хочу textarea быть такой же ширины, как мои другие сообщения.

HTML

<div class="row">
  <div class="col-sm-2">
    <!-- Empty Space -->
  </div>
  <div class="col-sm-2">
    Some text here
  </div>
  <div class="col-sm-4">
    <textarea placeholder="Text here"></textarea>
    <div class="well"> Posts ...</div>
  </div>
  <div class="col-sm-2">
    Some text here
  </div>
  <div class="col-sm-2">
    <!-- Empty Space -->
  </div>
</div>

И CSS

textarea{
  box-sizing: border-box;
  border-radius: 5px;
  resize: none;
}

Answer 1

Вы можете искать

textarea {
  width: 100%;
}

Ваши сообщения будут автоматически занимать все пространство в столбце, потому что divs являются элементами уровня блока. Смотри мою скрипку.

В качестве примечания отметим, что свойство box-sizing определяет отношение между указанной шириной / высотой и вычисленной шириной / высотой.

Answer 2

textarea {
  outline: none;
}

Это должно удалить свечение, ведьма изменяет размер вашего текстового поля.

Answer 3

Вы можете добавить атрибут ширины к textarea CSS

Как это:

width:100px; // you can change it to whatever width you want

textarea{
    box-sizing: border-box;
    border-radius: 5px;
    resize: none;
    width:100px; /* set you own width */

}

<div class="row">
        <div class="col-sm-2">
            <!-- Empty Space -->
        </div>
        <div class="col-sm-2">
            Some text here
        </div>
        <div class="col-sm-4">

            <textarea placeholder="Text here"></textarea> 
           <div class="well"> Posts ...</div>



        </div>
         <div class="col-sm-2">
            Some text here
        </div>
        <div class="col-sm-2">
            <!-- Empty Space -->
        </div>
</div>