Using input groups (with addons) together with hel

2019-07-29 12:10发布

问题:

I'm having a hard time getting Help-texts showing up properly (i.e. at the bottom of the field) with Bootstrap 4's input-groups with add-ons. Here's my code:

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Title</span>
    </div>
    <textarea class="form-control" name="title" aria-label="With textarea"></textarea>
    <small id="KeywordsHelpBlock" class="input-group-prepend text-muted">
        Some .
    </small>
</div>

Here is what it looks like:

Am I missing something obvious?

回答1:

This has been an issue in Bootstrap 4 for some time. The only way I've found is to add an 100% width empty span to force the wrap...

https://www.codeply.com/go/Rw1ZPnwIcS

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Title</span>
    </div>
    <textarea class="form-control" name="title" aria-label="With textarea"></textarea>
    <span class="w-100"></span>
    <small id="KeywordsHelpBlock" class=" text-muted">
        Some .
    </small>
</div>