突出的文本区域答案

【问题标题】：Text area sticking out of form突出的文本区域
【发布时间】：2020-09-30 06:05:23
【问题描述】：

我到处搜索，但没有找到对我不起作用的解决方案。我只希望我的 Textarea 从左到右有一点边距，所以它很适合那个灰色边框。我只能从左侧移动一点，但不能改变右侧。看起来是这样的：

这是它的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container mt-5 ">
  <form class="card card-color form-border" @submit.prevent="createNewTask">
    <div class="card-header px-3 mr-2">
      Add new Task
    </div>
    <div class="card-block">
      <textarea class="form-control pull-left" rows="3" cols="2" v-model="newTaskBody" placeholder="Create new task!"></textarea>
    </div>
    <div class="card-footer px-3">
      <button type="submit" class="btn btn-sm btn-secondary ml-2">Add task</button>
    </div>
  </form>
  <p v-if="error" class="error mt-2 alert alert-danger"> {{ error }}</p>
</div>

只有 o

.form-border {
        border-style: solid;
        border-color: #888
    }

表单边框我只做了一种样式，其余的都是bootstrap4。

【问题讨论】：

标签： html css vue.js bootstrap-4

【解决方案1】：

它看起来很正常，没有任何东西从容器中流出。唯一的变化是添加了一个边距，textarea 左右mx-2，我也从卡片标题中删除了mr-2，因为它在标题中添加了不必要的边距？

.form-border {
  border-style: solid;
  border-color: #888
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<div class="container mt-5">
  <form class="card card-color form-border" @submit.prevent="createNewTask">
    <div class="card-header px-3">
      Add new Task
    </div>
    <div class="card-block mx-2">
      <textarea class="form-control pull-left" rows="3" cols="2" v-model="newTaskBody" placeholder="Create new task!"></textarea>
    </div>
    <div class="card-footer px-3">
      <button type="submit" class="btn btn-sm btn-secondary ml-2">Add task</button>
    </div>
  </form>
  <p v-if="error" class="error mt-2 alert alert-danger"> {{ error }}</p>
</div>

【讨论】：