Bootstrap From：在每个屏幕上设置宽度 100%

Question

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

以下是我的 html 和引导代码：

<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