html - Bootstrap CSS 移动调整大小问题

Question

在将页面大小调整为移动设备大小时，我在使用 Bootstrap 时遇到了问题。输入表单正在转变为内联，并且在调整窗口大小时，我正在使用的字形图标不会停留在同一位置。我在下面包含了 2 张关于调整窗口大小之前和之后的外观的图片。

输入部分的 HTML 代码:

        <div class="col-sm-4" id="end">
            <div class="row">
                <div class="col-sm-6" id="start">
                    <span class="top">Date and Time</span>
                    <div class="input-group">
                        <div class = "input-group-addon"><span id="icon" class="glyphicon glyphicon-time"></span></div>
                        <input type="text" class="col-xs-4" id="date">
                        <input type="text" class="col-xs-4" id="time">
                    </div>
                    <button type="button" class="btn btn-info btn-sm" id="submit" onclick="getData()">Search</button>
                </div>
                <div class="col-sm-6" id="start">
                </div>
            </div>

        </div>

日期和时间 ID 的 CSS:

#date {
max-width: 100px;
min-width: 100px;
font-size: 12px;
}

#time {
max-width: 100px;
min-width: 100px;
margin-bottom: 0px;
font-size: 12px;
}

Normal sized look

Mobile sized look

Answer 1

如果您将 #date 和 #time 都设置为 min-width: 100px 和 max-width: 100px 同样，您的 div 不会大于或小于 100px。 也许您应该使用三个声明，例如: 宽度:150px，最小宽度:100px 和 最大宽度:200px;

另一种方法是百分比大小或 @media screen and (...)

w3schools有一个非常好的文档来弄明白并学习如何处理所有不同的调整大小的方法。