扩展 Bootstrap 内联表单以适应列的全宽答案

【问题标题】：Expand Bootstrap Inline Form to Fit Full-Width of Column扩展 Bootstrap 内联表单以适应列的全宽
【发布时间】：2018-06-15 04:24:08
【问题描述】：

我是 Bootstrap 的新手，一直在搞乱 v4。我的问题是使内联表单扩展到列内可用的全宽。

下面是我的标记：

 <div class="container">
    <div class="row">

        <div class="col-lg-2 title">

            <h2>Make a Gift:</h2>
            <p>Give Generously</p>

        </div>
        <div class="col-lg-10">


            <form class="form-inline ">

                <label class="sr-only">Donation Type</label>
                <select class="form-control my-1 mr-sm-2">
                    <option selected>One Time Donation</option>
                    <option value="1">Recurring Donation</option>
                </select>

                <label class="sr-only">Donation Amount</label>
                <input class="form-control my-1 mr-sm-2" type="number" placeholder="Donation Amount">

                <label class="sr-only">Choose Fund</label>
                <select class="form-control my-1 mr-sm-2">
                    <option selected>Syria Emergency</option>
                    <option value="1">Winterisation</option>
                </select>

                <button type="submit" class="btn btn-primary my-1">Donate Now</button>

            </form>

        </div>

    </div>
</div>

我很想听听社区关于从这里去哪里的信息。

【问题讨论】：

您要制作内联表单，垂直还是水平？
有什么问题？您的代码似乎运行良好jsfiddle.net/ppb40n39
@Lakindu 表单已经水平内联，但需要字段和按钮以适应 col-lg-10 中可用空间的全宽。
@SureshPonnukalai 查看问题。
@Lakindu 我该怎么做？

标签： html css bootstrap-4 bootstrap-grid

【解决方案1】：

您可以使用flex-grow 来利用可用空间。在您的情况下，您可以申请如下表单控件。

.form-inline .form-control {flex-grow:1}

DEMO

您可以在下面的堆栈溢出链接中获取更多关于使用 flex 扩展项目的信息。

Make flex-grow expand items based on their original size

【讨论】：

是的，这是正确的，使用引导程序只需使用 class="form-control flex-grow-1"