使用引导程序在表单组中设置输入/文本区域的宽度

Posted 2023-04-18

【中文标题】使用引导程序在表单组中设置输入/文本区域的宽度

【英文标题】：Set width of input / textarea in form group using bootstrap

【发布时间】：2017-11-29 02:16:48

【问题描述】：

我在引导模式窗口中创建了一个表单。 在该表单中，我使用输入类型文本和文本区域。

<div class="modal fade" id="TestModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Test</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form>
                @*Input 1*@
                <div class="form-group">
                    <label for="input1">Input 1</label>
                    <input type="text" class="form-control" id="input1" required maxlength="75">
                </div>


                @*Input 2*@
                <div class="form-group">
                    <label for="input2">Input 2</label>
                    <textarea class="form-control" id="input2" rows="18" required></textarea>
                </div>

                <div class="row">

                    @*Select 1*@
                    <div class="form-group col-lg-4">
                        <label for="select1">Select 1</label>
                        <select class="form-control" id="exampleSelect2" required>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>

                    @*Input 3*@
                    <div class="form-group col-lg-4">
                        <label for="input3">Input 3</label>
                        <input type="text" class="form-control" id="input3" required>
                    </div>

                    @*Input 4*@
                    <div class="form-group col-lg-4">
                        <label for="input4">Input 4</label>
                        <input type="text" class="form-control" id="input4" required>
                    </div>

                </div>                   
                <button type="submit" class="btn btn-primary">Create</button>
            </form>
        </div>
    </div>
</div>

结果如下：

如何为文本输入和文本区域设置与它们下面的3个控件相同的宽度？

【参考方案1】：

我按照第二篇帖子here中的建议解决了。

min-width: 100%

成功了。

【参考方案2】：

用 jQ 类选择器来做。

$(".modal-body.form-control").css("width","100px");
$(".modal-body.form-control").css("min-width","100px");

【讨论】：

或者为width和max-width准备一个css类并将其添加到$(".modal-body.form-control").addClass("className")

您可以通过简单地使用 CSS 来做到这一点。这里不需要 jQuery 或 javascript。