Question

我在Boostrap col中嵌套了一个联系表单（一堆输入/跨度元素）。随着浏览器缩小，输入字段缩小到不希望的大小。

我尝试添加各种col断点，这种方法可以工作，但它看起来很时髦，而且在缩小到断点之前仍然缩小得太多。我也一直在寻找一种指定最小宽度的方法，但是也没有运气。

<!-- Custom CSS -->
.input-group-text {
  width: 40px;
}
.input-group-text span {
  margin: 0 auto;
}

.body-main-bg {
  background-color: #eeeeee;
}

<!-- Contact Form -->
<div class="container-fluid">
        <div class="row body-main-bg justify-content-center">
                <div class="col-4 my-3 text-center">
                    <h4>Contact Us</h4>
                </div>
            </div>
            <form id="contact-form" method="" action="">
            <div class="row body-main-bg justify-content-center">
                <div class="col-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-user"></span>
                            </span>                    
                        </div>
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                </div>
            </div>
            <div class="row body-main-bg justify-content-center">
                <div class="col-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-envelope"></span>
                            </span>                    
                        </div>
                        <input type="text" class="form-control" placeholder="Email">
                    </div>
                </div>
            </div>
            <div class="row body-main-bg justify-content-center">
                <div class="col-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-ellipsis-v"></span>
                            </span>                    
                        </div>
                        <input type="text" class="form-control" placeholder="Subject">
                    </div>
                </div>
            </div>
            <div class="row body-main-bg justify-content-center">
                <div class="col-4 mb-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <span class="fa fa-pencil"></span>
                            </span>                    
                        </div>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
                    </div>
                </div>
            </div>
            <div class="row body-main-bg justify-content-center">
                <div class="col-4 mb-3">
                    <button class="btn btn-primary btn-block" type="submit">Submit</button>
                </div>
            </div>
        </form>
    </div>

Answer 1

如果将col-4更改为col-lg-4或col-md-4，则将具有所需的布局。

问题是使用col-4时，您实际上是在说“在所有设备上保持此宽度”。当col-lg-4或col-md-4响应并在大型/中型设备及以下设备上将div设置为100％时。

在此处查看引导网格选项：https://getbootstrap.com/docs/4.3/layout/grid/

输入元素随着浏览器调整大小而缩小太多的问题

1 个答案: