Как установить размер по умолчанию для текстовой области, но при этом разрешить ее настройку в зависимости от устройства пользователя?

Question

Я пытаюсь создать текстовое поле с 5 строками и шириной по умолчанию, равным ширине контейнера под ним, но также позволяю ему стать более узким, если пользователь подключен к небольшому мобильному устройству (например, смартфону). Я исследовал и вижу, что есть споры о том, использовать ли CSS или HTML для изменения размера текстовой области. Я довольно новичок в веб-разработке (начался на прошлой неделе), поэтому, если вы знаете, как решить мою проблему, не могли бы вы сказать мне, почему вы выбрали метод, который вы сделали?

<form class="form-inline">

    <div class="form-group">

        <textarea class="form-control" rows="5"></textarea>

    </div>
</form>


<form class="form-inline">

  <div class="form-group">

    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

    <div class="input-group">

      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Send!</button>

</form>

Answer 1

С помощью form-inline делает form-group дисплей inline-block.. если вы хотите, чтобы группа форм растягивалась на всю ширину, которую вы можете использовать form-horzontal

или вы можете просто установить стиль отображения form-group в block

<form class="form-inline">
    <div class="form-group" style="display:block">
        <textarea class="form-control" rows="5"></textarea>
    </div>
</form>

убедитесь, что у вашего site.css нет значения max-width для textareas. это в таблице стилей по умолчанию, я считаю,

input,
select,
textarea {
    max-width: 280px;
}