html - 尝试使用 col-xs Bootstrap

Question

您好，我正在尝试为我的元素使用 col-xs 类，以便它们在移动设备中显示。但不幸的是，它看起来并不好。以下屏幕截图显示了它在我的浏览器中的外观:

链接:http://i.imgur.com/pTvuriv.png

然而，当我缩小浏览器时，我得到了这个:

链接:http://i.imgur.com/NynjEpe.png

如您所见，第一个文本字段、下拉列表和按钮看起来不再好看了。但我确实使用了 col-xs 类，它应该使它对移动设备响应(并且看起来不错)。

不过，搜索文本字段和按钮看起来更好，但这可能是因为我没有为此使用 col-xs。

这是我试过的:

{{Form::open(array('route'=>'user.store.work', 'method'=>'post'))}}
            <div class="row" >
                <div class="col-xs-4  col-xs-offset-3 " >{{Form::text('work_name', '',array('class' => 'form-control'))}}</div> 
                <div class="col-xs-2" >  
                    <select class="form-control"  name="worktypes" >
                        <option  selected value="order" >Offerte</option>
                        <option value="project">Project</option>
                        <option value="task">Taak</option>
                    </select>
                </div>

                    {{Form::hidden('route', Request::path() )}}
                     {{--{{Form::hidden('id_user', Auth::user()->id )}}--}}

                {{Form::submit('Maken',  array('class' => 'btn btn-default col-xs-1 col-centered'))}}
               {{-- <div class="col-md-4 col-centered">{{Form::submit('Maken',  array('class' => 'btn btn-default', 'id' => 'work-submit'))}}</div> --}}
            </div>

{{Form::close()}}

{{ Form::open(array('url'=>url('user/search/order'), 'method'=>'post', 'class'=>'navbar-form navbar-right')) }} 

{{Form::hidden('route', Request::path() )}}

{{Form::token()}}

{{Form::text('keyword', 'Search', array('class'=>'form-control'))}}

{{Form::submit('Zoeken',  array('class' => 'btn btn-default'))}}

{{Form::close()}}

有人可以帮帮我吗？

Answer 1

如果您想要强制列在移动设备上以内嵌方式(并排)显示，您应该只使用col-xs-* 类(较小的屏幕)。

在您的情况下，当屏幕不够宽时它不起作用，因为列的内容超出了列的宽度。

您应该使用 col-md-* 或 col-lg-* 类，这意味着当屏幕宽度变为太小了。

各种类如何工作的示例: http://getbootstrap.com/examples/grid/