Question

我想用CSS Bootstrap制作一个好看的响应式搜索表单。

以下是我的html和bootstrap代码：

<form class="form-inline" role="form" style="">
                    <div class="row">               
                        <div class=" col-md-4 form-group group-1">
                            <div class="input-group">
                                <span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
                                <!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
                                <input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
                            </div>
            </div>

            <div class="col-md-3 form-group group-1">
                            <div class="input-group">
                                <span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
                                <!--<span class="btn-info input-group-addon form-icon">Location</span>-->
                                <select class="form-control">
                                <option>London</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                </select>
                            </div>
            </div>


                        <div class="col-md-3 form-group group-1">
                            <div class="input-group">
                                <span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span> 
                                <!--<span class="btn-info input-group-addon form-icon">Category</span>-->
                                <select class="form-control" style="">
                                <option>Administration</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                </select>
                            </div>
            </div>

                        <div class="col-md-2 form-group group-1">                        
                            <input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
                        </div>
                    </div>
        </form>

这是它在笔记本电脑屏幕上的外观： enter image description here

这是它在移动设备上的外观： enter image description here

正如您所看到的那样，在具有全宽输入表格的移动设备上看起来非常不错，但在我的笔记本电脑屏幕上看起来并不好看。我想在每个设备屏幕上制作全宽度。请帮忙。

Answer 1

只需将您的代码放到：<div class="container"> your code </div>，这样看起来会更好。

<div class="container">
<form class="form-inline" role="form" style="">
                    <div class="row">               
                        <div class=" col-md-4 form-group group-1">
                            <div class="input-group">
                                <span class="btn-info input-group-addon"><span class="glyphicon glyphicon-search form-icon"></span></span>
                                <!--<span class="btn-info input-group-addon form-icon">Keyword</span>-->
                                <input type="text" id="searchjob" class="form-control" placeholder="Enter Keywords">
                            </div>
            </div>

            <div class="col-md-3 form-group group-1">
                            <div class="input-group">
                                <span class="btn-info input-group-addon"><span class="glyphicon glyphicon-globe form-icon"></span></span>
                                <!--<span class="btn-info input-group-addon form-icon">Location</span>-->
                                <select class="form-control">
                                <option>London</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                </select>
                            </div>
            </div>


                        <div class="col-md-3 form-group group-1">
                            <div class="input-group">
                                <span class="btn-info input-group-addon"><span class="glyphicon glyphicon-question-sign form-icon"></span></span> 
                                <!--<span class="btn-info input-group-addon form-icon">Category</span>-->
                                <select class="form-control" style="">
                                <option>Administration</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                <option>Kabul</option>
                                </select>
                            </div>
            </div>

                        <div class="col-md-2 form-group group-1">                        
                            <input type="submit" value="SEARCH" class="btn btn-warning form-top" style="margin-top: -1px">
                        </div>
                    </div>
        </form>
        </div>

要获得更好的结果，请参阅container此处Container Bootstrap Documentation

的文档

Bootstrap From：在每个屏幕上使宽度100％

1 个答案: