最小化窗口时,Bootstrap文本框宽度和对齐方式会发生变化

时间:2015-11-13 17:55:34

标签: c# html css asp.net-mvc twitter-bootstrap

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

@event.listens_for(class_.photo, 'set')
def set_photo(target, value, old_value, initiator):
    value.photoable_type = type

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

我在css下面试过,但它没有用,

<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>

我在这里做错了什么想法?

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

试试这个:

<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>

然后删除位置:绝对

答案 2 :(得分:0)

参考What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

你的代码没有col-md- *或col-sm- *所以最小化浏览器窗口的属性是未定义的。

将课程添加为

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