Попытка использовать 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/