Question

我正在使用bootstrap-4编写简单的联系表。我有1行2列。左列包含输入文本对象和选择对象。右列包含textarea。我尝试使textarea与左栏相同。

我将h-100类分配到了textarea和父div中，但它比左栏高。

链接到屏幕截图：https://i.imgur.com/Lrfwhtn.png

<div id="content" class="margin-from-nav">
    <div class="container">
        <form>
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="form-group">
                        <label for="inputName1">Imię</label>
                        <input type="text" class="form-control" id="inputName1" placeholder="Imie">
                    </div>
                    <div class="form-group">
                        <label for="inputName2">Nazwisko</label>
                        <input type="text" class="form-control" id="inputName2" placeholder="Nazwisko">
                    </div>                  
                    <div class="form-group">
                        <label for="inputEmail4">Adres e-mail</label>
                        <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label class="mr-sm-2" for="inlineFormCustomSelect">Temat zapytania</label>
                        <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
                            <option selected>Wybierz temat...</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                    <div class="form-group h-100">
                        <label for="exampleFormControlTextarea1">Treść wiadomości</label>
                        <textarea class="h-100 form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
                    </div>
                </div>          
            </div>
        </form>     
    </div>
</div>

Answer 1

您可以使用flexbox实用程序类（d-flex flex-column）使文本区域填充剩余高度（flex-grow-1）：

       <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 d-flex flex-column">
            <div class="form-group flex-grow-1 d-flex flex-column">
                 <label for="exampleFormControlTextarea1">Treść wiadomości</label>
                 <textarea class="form-control flex-grow-1" id="exampleFormControlTextarea1"></textarea>
            </div>
       </div>

演示：https://www.codeply.com/go/2z4ckbR2FU

如何设置文本区域的高度以填充整个列？

1 个答案: