如何通过窗口调整大小调整css中表单的宽度？答案

【问题标题】：How to adjust width of form in css with window resize?如何通过窗口调整大小调整css中表单的宽度？
【发布时间】：2016-12-31 18:13:47
【问题描述】：

我有以下表格：

<form id="search_form" class="navbar-form navbar-left" method="GET" action="/search/">
    <div class="input-group" id="search_form_container">
        <input type="text" id="search_box" class="form-control" name="search" placeholder="Search" value="{% block srch_val %}{% endblock %}">
        <span class="input-group-btn">
            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
        </span>
    </div>
</form>

CSS

#search_form {
    position: absolute;
    left: 180px;
}

我想创建一个搜索表单，它会在调整大小时根据窗口宽度调整其宽度。例如请查看www.amazon.com

我怎样才能做到这一点？

【问题讨论】：

标签： jquery html css twitter-bootstrap-3 width

【解决方案1】：

您可以尝试实现Bootstrap，因为他们的 row 和 col 样式布局可以很好地处理这个问题。

你的页面可能是这样的......

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example Site</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/   bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <!-- Wrapper -->
    <div class="container-fluid">
        <!-- Row -->
        <div class="row">
            <!-- Col 1 -->
            <div class="col-sm-3">
                Example
            </div>
            <!-- Col 2 -->
            <div class="col-sm-6">
                <!-- Form -->
                <form id="search_form" class="navbar-form navbar-left" method="GET" action="/search/">
                    <div class="input-group" id="search_form_container">
                        <input type="text" id="search_box" class="form-control" name="search" placeholder="Search" value="{% block srch_val %}{% endblock %}" style="width: 100%">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </div>
            <!-- Col 3 -->
            <div class="col-sm-3">
                Example
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

【解决方案2】：

弹性盒！

这是很久以前支持的纯css属性。好消息是您绝对不需要单独的框架来制作响应式 html！您可以使用纯 CSS：

#search_form {
    position:relative;
    width:100%;
    padding:0px 5% 0px 180px;
    box-sizing:border-box;
}

#search_form_container { display:flex; flex-direction:row; }

#search_form input[type=text] { flex-grow:1; }
#search_form_container > span { flex-grow:0;  }

请注意，您必须根据自己的设计等确定确切的空间偏移量和宽度。但是 flexbox 的想法以及它如何帮助制作响应式 html 元素是可见的。

#search_form {
    position:relative;
    width:100%;
    padding:0px 5% 0px 180px;
    box-sizing:border-box;
}

#search_form_container { display:flex; flex-direction:row; }

#search_form input[type=text] { flex-grow:1; }
#search_form_container > span { flex-grow:0;  }

<form id="search_form" class="navbar-form navbar-left" method="GET" action="/search/">
    <div class="input-group" id="search_form_container">
        <input type="text" id="search_box" class="form-control" name="search" placeholder="Search" value="{% block srch_val %}{% endblock %}">
        <span class="input-group-btn">
            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
        </span>
    </div>
</form>

【讨论】：