Question

在将网页重新调整为移动尺寸时，我遇到了使用Bootstrap的问题。输入表单将转换为内联，并且一旦调整窗口大小，我正在使用的glyphicon不会保持在相同的位置。我在下面列出了两张图片，说明了调整窗口大小之前和之后的样子。

输入部分的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。也许你应该使用三个声明： width: 150px，min-width: 100px和max-width: 200px;

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

w3schools有一个非常好的文档可以找出如何处理所有不同的大小调整方法。

Answer 2

这不是最美丽的解决方案，但您可以尝试强制“输入”与class="col-lg-12"一样宽。

像这样：

       <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-lg-12" id="date">
                    <input type="text" class="col-lg-12" 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>

Bootstrap CSS Mobile调整大小问题

2 个答案: