试图使用col-xs引导程序

嗨我想为我的元素使用col-xs类，以便它们在移动设备中查找。但不幸的是它看起来不太好。下面的截图显示它的外观在我的浏览器：试图使用col-xs引导程序

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

然而，当我让我的浏览器小我得到这个：

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

正如你所看到的第一个textfield，dropdownlist和按钮看起来不再好。但是我确实使用了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()}}

有人可以帮助我，好吗？

来源

2014-11-04 superkytoz

如果您希望在移动设备（较小屏幕）上内联（并排）显示列，则只应使用col-xs-*类。

就你的情况而言，当屏幕不够宽时，它不起作用，因为列的内容超过了列的宽度。

您应该使用col-md-*或col-lg-*类，这意味着当屏幕宽度变得太小时，这些列将折叠为垂直格式。的各种类如何工作

例子： http://getbootstrap.com/examples/grid/

来源

2014-11-04 23:39:39 Axel

的文档是本非常好的..看看http://getbootstrap.com/css/#grid – Legin76 2014-11-04 23:45:19

@ Legin76 - 是啊。学习所有引导组件如何工作至关重要。 – Axel 2014-11-05 00:17:25

试图使用col-xs引导程序

回答

相关问题