最小化窗口时，引导程序文本框的宽度和对齐方式会发生变化

本文关键字：对齐 方式会 变化 窗口 引导程序 文本 最小化 | 更新日期: 2023-09-27 18:21:54

我的.cshtml文件中有以下代码

<div class="input-group col-lg-2 navbar-right" style="margin-top: 7px">
    <input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
                <i class="fa fa-search"></i>
            </button>
       </span>
</div>

当我最小化窗口时，文本框会出现在其他控件的顶部，文本框的宽度也会改变。

我试过下面的css，但它不起作用，

<style type="text/css">
    .form-control {
        width: auto;
        position: absolute;
    }
</style>

你知道我在这里做错了什么吗？

最小化窗口时，引导程序文本框的宽度和对齐方式会发生变化

您是否尝试删除位置：绝对和设置宽度：100%；

试试这个：

<div class="form-group">
        <div class="col-md-offset-7 col-md-2">
            <input type="text" class="form-control" placeholder="Search..." id="searchText" name="searchText" />
        </div>
        <div class="col-md-2">
            <button class="btn btn-default" type="submit" id="btnSearch" onclick="submit()">
                <i class="fa fa-search"></i>
            </button>
        </div>

        </div>

然后移除位置：绝对

参考Bootstrap中col lg-*、col md-*和col sm-*之间的区别是什么？

您的代码没有col-md-*或col-sm-*，因此关于最小化浏览器窗口的属性是未定义的。

添加类作为

<div class="input-group col-lg-2 col-md-4 col-sm-2 navbar-right" style="margin-top: 7px">
相关文章：