Question

我有一个联系表单，其中包含两个输入字段（姓名和姓氏）和一个较大的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>

Answer 1

文本区域为

col-md-6 col-sm-6

文本框是

col-md-4 mb-3

因此textarea是一半，文本框是第三。

Answer 2

您已设置类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>

编辑：由于您使用了其他类，因此仅在全屏模式下可以使用。

Answer 3

这应将文本区域的宽度设置为与输入相同。

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

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

3 个答案: