设置输入字段css的最小宽度

Question

我是造型新手。我有一些输入字段似乎有一个固定的最小宽度，这样当屏幕很小时，输入字段不再缩小并越过边框，如下所示。我试图设置输入{min-width：10px}以查看是否修复它但它没有。我正在使用bootstrap 4

<div class="row">
        <div class="col-md-6">
            <h5>Start Time:</h5>
            <div class="row">
                <div class="col-xs-4">
                    <input type="number" placeholder="hour">
                </div>

                <div class="col-xs-1"> : </div>

                <div class="col-xs-4">
                    <input type="number" placeholder="minutes">
                </div>

                <div class="col-xs-3">
                    <select id="severity-dropdown">
                        <option [value]="am">am</option>
                        <option [value]="am">pm</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <h5>Stop Time:</h5>
            <div class="row">
                <div class="col-xs-4">
                    <input type="number" placeholder="hour">
                </div>

                <div class="col-xs-1">
                    :
                </div>

                <div class="col-xs-4">
                    <input type="number" placeholder="minutes">
                </div>

                <div class="col-xs-3">
                    <select id="severity-dropdown">
                        <option [value]="am">am</option>
                        <option [value]="am">pm</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

Answer 1

您可以使用媒体查询执行此任务，例如：

@media screen and (max-width:500px){
  input{max-width:40px;}

}

Answer 2

尝试将表单控件添加到输入中：

<input class="form-control" type="number" placeholder="minutes"/>