html - 从 : make width 100% on every screen Bootstrap

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