Bootstrap grid change columns on resize

Я пытаюсь найти способ изменить размер столбцов сетки. Это объясняет, поэтому я прикрепил картину того, что я хотел бы достичь , когда я изменяю размер окна браузера, сетка меняется, поэтому последний элемент в столбце перемещается в новую строку. Можно ли это сделать с помощью бутстрапа или любой другой технологии?Bootstrap grid change columns on resize

картинка стоит тысячи слов

источник

2017-01-19 Energizem

Ожидается, что вы по крайней мере попытаться закодировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы делаете некоторые [** дополнительные исследования **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали. –

Я не знал, что искать tbh, мое лучшее предположение было bootstrap, но все примеры бутстрапов, которые я видел, не могли это сделать ... – Energizem

бутстрапу построив в классах вы можете сделать это с ними. для приведенного выше изображения вы показали попробовать следующий код и не забудьте включить bootstrap css. которые вы можете получить с сайта getBootstrap. я предполагаю, что есть 6 ящиков подряд. вы можете даже обрабатывать с помощью @media query в css. попробуйте исследовать @media поведение запроса на различной ширины экрана и различные типы устройств, таких как Ipad таблетки и телефон и т.д.

  <html lang="en"> 
     <head> 
      <title>Bootstrap Example</title> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     </head> 
     <body> 
     <div class="row"><!-- row is a built in class of bootstrap and each row has 12 column --> 
       <!-- give each column a width of 2 columns --> 
       <!-- col-lg-* is for large screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;> 
         Box 1 
       </div> 
       <!-- col-md-* is for medium size screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 2 
       </div> 
       <!-- col-sm-* is for small screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 3 
       </div> 
       <!-- col-xs-* is for extra small screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 4 
       </div> 
       <!-- col-xl-* is for extra large screens but include all type of classes for all type of screens--> 
       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 5 
       </div> 

       <div class="col-md-2 col-sm-2 col-lg-2 col-xs-2 col-xl-2 control-label" style="border:1px solid #000000;min-width:200px;"> 
         Box 6 
       </div> 
     </div> 
     </body> 
     </html>

источник

2017-01-19 17:26:30

Thx для ввода, цель состоит в том, чтобы иметь коробку 6 для перемещения вниз по строке, так как u масштабирует браузер, ширина ящиков остается одинаковой. – Energizem

просто добавьте min-width: 200px; в атрибуте стиля каждого столбца div, и у вас будет желаемый –

. Я редактирую ответ, и вы можете увидеть там истинное изображение –

Если я что-то в вашем вопросе не хватает, это именно то, что Bootstrap для. Вы можете придумать свое решение, но начать с Bootstrap так легко. существуют

http://getbootstrap.com/

Другие реагирующие рамки, но я рекомендую Bootstrap

источник

2017-01-19 16:49:28

Что с downvotes? Я ошибаюсь или не должен отвечать на такой основной вопрос? Я выиграл в качестве участника за 4 года, а недавно начал пытаться дать ответы на некоторые вопросы. –

Я не уверен о downvotes, но THX для ввода. И да, я попробовал bootstrap, но не смог выполнить эту работу. Думаю, мне все еще нужно много узнать о bootstrap – Energizem

, вы можете попробовать приведенный выше код, который находится в рабочем состоянии –

Bootstrap grid change columns on resize

ответ

Смежные вопросы