突出的文本區域

Question

我到處搜索，我發現的解決方案都沒有對我有用。 我只希望我的 Textarea 從左到右有一點邊距，所以它很適合那個灰色邊框。 我只能從左側移動一點，但不能改變右側。 這是它的外觀：

1

這是它的代碼：

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

我只為表單邊框制作了一種樣式，它的 rest 是 bootstrap4。

Answer 1

它看起來很正常，沒有任何東西從容器中流出。 唯一的變化是添加一個邊距， textarea left 和 right mx-2 ，我也從卡片頭mr-2中刪除了，因為它不必要地在 header 中添加了一個邊距？

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