textarea与输入字段的宽度不同

Question

我有一个联系表格，有两个输入fiels（姓名和姓氏）和一个更大的textarea字段。但是这个textarea与其他两个输入字段的宽度不同（见图）。我尝试了几件事，但我不能让它奏效。有人可以帮我解决这个问题吗？我正在使用bootstrap。

这是我的代码：

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

Answer 1

文字区域是

col-md-6 col-sm-6

文本框是

col-md-4 mb-3

因此textarea是一半而textbox是第三个。

Answer 2

这应该设置textarea的宽度与输入相同。

<div class="form-row">
    <div class="col-md-4 mb-3">
        <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>

Answer 3

你已经设置了类col-md-6和col-sm-6。其他输入的宽度为4.您可能希望将Textarea上的类更改为col-md-8和col-sm-8。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="needs-validation" novalidate>
    <div class="form-row">
      <div class="col-md-6 col-sm-12 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-6 col-sm-12 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-6 col-sm-12 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">
      <!-- change the following line to col-...-8 -->
      <div class="col-sm-12">
        <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>
</div>

编辑：剪辑仅适用于全屏，因为您使用的其他类。