Question

您好我正在尝试将col-xs类用于我的元素，以便它们可以在移动设备中查找。但不幸的是，它并不好看。以下屏幕截图显示了它在浏览器中的显示效果：

link：http://i.imgur.com/pTvuriv.png

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

link：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/

尝试使用col-xs Bootstrap

1 个答案: