时间戳

首页 > 解决方案 > textarea 与输入字段的宽度不同

css - textarea 与输入字段的宽度不同

问题描述

我有一个带有两个输入字段（姓名和姓氏）和一个更大的 textarea 字段的联系表。但是这个文本区域的宽度与其他两个输入字段的宽度不同（见图）。我尝试了几件事，但我无法让它发挥作用。有人可以帮我解决这个问题吗？我正在使用引导程序。

这是我的代码：

    <form class="needs-validation" novalidate>
        <div class="form-row">
            <div class="col-md-4 mb-3">
                <label for="validationCustom01">Vorname</label>
                <input type="text" class="form-control" id="validationCustom01" placeholder="Vorname" required>
                <div class="invalid-feedback">
                    Bitte geben Sie einen gültigen Vornamen ein.
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <label for="validationCustom02">Nachname</label>
                <input type="text" class="form-control" id="validationCustom02" placeholder="Nachname" required>
                <div class="invalid-feedback">
                    Bitte geben Sie einen gültigen Nachnamen ein.
                </div>
            </div>
        </div>
        <div class="form-row">
            <div class="col-md-4 mb-3">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    placeholder="Email" required>
                <small id="emailHelp" class="form-text text-muted">Wir werden Ihre E-Mail niemals an Dritte
                    weitergeben.</small>
            </div>
        </div>
        <div class="form-row">
            <div class="col-md-6 col-sm-6">
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Nachricht</label>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="8"
                        placeholder="Nachricht" required></textarea>
                    <div class="invalid-feedback">
                        Bitte geben Sie eine gültige Nachricht ein.
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
                <label class="form-check-label" for="invalidCheck">
                    Agree to terms and conditions
                </label>
                <div class="invalid-feedback">
                    You must agree before submitting.
                </div>
            </div>
        </div>
        <button class="btn btn-outline-secondary" type="submit">Senden</button>
    </form>

文本区域

标签： csshtmlbootstrap-4

解决方案

文本区域是

col-md-6 col-sm-6

文本框是

col-md-4 mb-3

所以 textarea 是一半，而 textbox 是三分之一。

推荐阅读