значение чисел в "col-md-4", "col-xs-1", "col-lg-2" в bootstrap

<p>я запутался с системой сетки в новой bootstrap, особенно с этими классами:</p><pre><code>col-lg-* col-md-* col-xs-* </code></pre><p>(где * представляет некоторое число).</p><p>может кто-нибудь объяснить, пожалуйста, следующее:</p><ol> <li><strong><em> как </em></strong> <em> это число выравнивает сетки? </em></li> <li><strong><em> как </em></strong> <em> использовать эти цифры? </em></li> <li><strong><em> что </em></strong> <em> они на самом деле представляют? </em></li> </ol>

<p>игнорирование букв (x <em> s </em>, <em> sm </em>, <em> md </em>, <em> lg </em>) <strong> <em> на данный момент </em> </strong> <em> , </em> я начну только с цифр ...</p><ul> <li>числа (1-12) представляют часть общей ширины любого деления</li> <li>все делятся на 12 столбцов</li> <li>итак, <code>col-*-6</code> охватывает 6 из 12 столбцов (половина ширины), <code>col-*-12</code> охватывает 12 из 12 столбцов (вся ширина) и т. д.</li> </ul><p>итак, если вы хотите <strong> два одинаковых столбца </strong> разделить div, напишите</p><pre><code><div class="col-xs-6">column 1</div> <div class="col-xs-6">column 2</div> </code></pre><p>или, если вы хотите <strong> три неравных столбца </strong>, чтобы охватить ту же ширину, вы можете написать:</p><pre><code><div class="col-xs-2">column 1</div> <div class="col-xs-6">column 2</div> <div class="col-xs-4">column 3</div> </code></pre><p>вы заметите, что число столбцов всегда составляет до 12. это может быть меньше двенадцати, но будьте осторожны, если больше 12, так как ваши оскорбительные div будут переходить к следующему ряду (не <code>.row</code>, что совсем другая история).</p><p>вы также можете <strong> вкладывать столбцы в столбцы </strong> (лучше всего с оберткой <code>.row</code>), например:</p><pre><code><div class="col-xs-6"> <div class="row"> <div class="col-xs-4">column 1-a</div> <div class="col-xs-8">column 1-b</div> </div> </div> <div class="col-xs-6"> <div class="row"> <div class="col-xs-2">column 2-a</div> <div class="col-xs-10">column 2-b</div> </div> </div> </code></pre><p>каждый набор вложенных элементов div также охватывает до 12 столбцов родительского элемента div. <strong> примечание: </strong> поскольку каждый класс <code>.col</code> имеет заполнение по 15px с каждой стороны, обычно следует помещать вложенные столбцы в <code>.row</code> с полями -15px. это позволяет избежать дублирования отступов и сохраняет содержимое выровненным между вложенными и не вложенными классами col.</p><p>- вы специально не спрашивали об использовании <code>xs, sm, md, lg</code>, но они идут рука об руку, поэтому я не могу не коснуться его ...</p><p>короче говоря, они используются для определения, при каком <em> размере экрана </em> должен применяться этот класс:</p><ul> <li><strong> xs </strong> = <em> очень маленькие экраны </em> (мобильные телефоны)</li> <li><strong> см </strong> = <em> маленькие экраны </em> (планшеты)</li> <li><strong> md </strong> = <em> средние экраны </em> (некоторые рабочие столы)</li> <li><strong> lg </strong> = <em> большие экраны </em> (остальные рабочие столы)</li> </ul><blockquote> <p>прочтите главу <a href="https://getbootstrap.com/docs/4.0/layout/grid/#grid-options">"<strong> grid options </strong>"</a> из официальной документации bootstrap для получения более подробной информации.</p> </blockquote><p>вы должны <em> обычно </em> классифицировать div, используя несколько классов столбцов, чтобы он вел себя по-разному в зависимости от размера экрана (это и есть то, что делает bootstrap отзывчивым). например: div с классами <code>col-xs-6</code> и <code>col-sm-4</code> будет занимать половину экрана мобильного телефона (xs) и 1/3 экрана планшета (см).</p><pre><code><div class="col-xs-6 col-sm-4">column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) --> <div class="col-xs-6 col-sm-8">column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet --> </code></pre><p><strong> примечание: </strong> согласно комментарию ниже, классы сетки для данного размера экрана применяются к этому размеру экрана <strong> и больше </strong> если другое объявление не переопределяет его (т.е. <code>col-xs-6 col-md-4</code> охватывает 6 столбцов в <code>xs</code> <em> и <code>sm</code> </em> и 4 столбца в <code>md</code> <em> и <code>lg</code> </em>, хотя <code>sm</code> и <code>lg</code> никогда не были явно объявлены)</p><p><strong> примечание: </strong> если вы не определите <code>xs</code>, по умолчанию будет <code>col-xs-12</code> (т. е. <code>col-sm-6</code> составляет половину ширины на экранах <code>sm</code>, <code>md</code> и <code>lg</code>, но полный -ширина на <code>xs</code> экранах).</p><p><strong> примечание: </strong> на самом деле все в порядке, если ваш <code>.row</code> содержит более 12 столбцов, если вы знаете, как они будут реагировать. - это спорный вопрос, и не все с этим согласны.</p>

<blockquote> <p>сетка bootstrap имеет четыре класса:<br> <strong> xs (для телефонов)<br> см (для таблеток)<br> md (для настольных компьютеров)<br> lg (для больших настольных компьютеров) </strong></p> <p>указанные выше классы можно комбинировать для создания более динамичных и гибких макетов.</p> <p><strong> совет: </strong> каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно только указать xs.</p> </blockquote><p><strong> ок, </strong> ответ прост, но читайте дальше:</p><p><strong> col-lg - </strong> обозначает большой столбец <code>≥ 1200px</code><br> <strong> col-md - </strong> обозначает средний столбец <code>≥ 992px</code><br> <strong> col-xs - </strong> обозначает очень маленький столбец <code>≥ 768px</code><br></p><p>числа в пикселях - это точки останова, поэтому, например, <code>col-xs</code> нацеливается на элемент, когда окно меньше <strong> 768px </strong> (вероятно, на мобильных устройствах) ...</p><p>я также создал изображение ниже, чтобы показать, как работает система сетки, в этих примерах я использую их с 3, например, <code>col-lg-6</code>, чтобы показать вам, как работает система сетки на странице, посмотрите, как <code>lg</code>, <code>md</code> и <code>xs</code> реагируют на окно размер:</p><p> <a href="https://i.stack.imgur.com/s1rya.png"><img src="https://i.stack.imgur.com/s1rya.png" alt="bootstrap grid system, col-*-6"></a> </p>

<p>главное в этом:</p><p><code>col-lg-*</code> <code>col-md-*</code> <code>col-xs-*</code> <code>col-sm</code> определяет, сколько столбцов будет на этих разных размерах экрана.</p><p>пример: если вы хотите, чтобы на экранах рабочего стола и на экранах телефонов было два столбца, в столбцы добавьте два класса <code>col-md-6</code> и два класса <code>col-xs-6</code>.</p><p>если вы хотите, чтобы на экранах рабочего стола было два столбца и только один столбец на экранах телефона (то есть две строки, сложенные друг на друга), вы добавляете <code>two col-md-6</code> и два <code>col-xs-12</code> в ваши столбцы, а поскольку сумма будет равна 24, они будут автоматически складываться сверху друг друга, или просто оставьте стиль <code>xs</code> вне.</p>

<p>из <a href="https://getbootstrap.com/docs/3.3/css/#grid-options">твиттер bootstrap документация</a> :</p><ul> <li>маленькая сетка (≥ 768 пикселей) = <code>.col-sm-*</code>,</li> <li>средняя сетка (≥ 992px) = <code>.col-md-*</code>,</li> <li>большая сетка (≥ 1200px) = <code>.col-lg-*</code>.</li> </ul><p> <a href="https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-twitter-bootstra">читать дальше ...</a> </p>

<p><strong> вот, пожалуйста </strong></p><p>col-lg-2: если экран большой (<strong> lg </strong>), то этот компонент займет пространство <strong> 2 </strong> элементы, учитывающие всю строку, могут вмещать 12 элементов (поэтому вы увидите, что на большом экране этот компонент занимает 16% пространства строки)</p><p>col-lg-6: если экран большой (<strong> lg </strong>), то этот компонент займет место <strong> 6 </strong> элементы, учитывающие всю строку, могут уместиться в 12 элементов - при применении вы увидите, что компонент занял половину доступного пространства в строке.</p><p>вышеуказанное правило применяется только при большом экране. когда экран маленький, это правило отбрасывается и отображается только один компонент на строку.</p><p>ниже изображение показывает различные размеры экрана:</p><p> <a href="https://i.stack.imgur.com/qrm0o.png"><img src="https://i.stack.imgur.com/qrm0o.png" alt="screen size definitions"></a> </p>