PROSAGA码农传奇-Bootstrap-引导程序中“col-md-4”，“col-xs-1”，“col-lg-2”中数字的含义

0# 哈哈哈哈 | 2019-08-31 10-32

1# Moso31 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”>
  <P>
    忽略字母（x
    <EM>
      小号
    </EM>
    ，
    <EM>
      SM
    </EM>
    ，
    <EM>
      MD
    </EM>
    ，
    <EM>
      LG
    </EM>
    ）
    的<strong>
      <EM>
        目前
      </EM>
    </强>
    <EM>
      ，
    </EM>
     我将从数字开始......
  </p>
  <UL>
    <LI>
      数字（1-12）代表任何div的总宽度的一部分
    </LI>
    <LI>
      所有div分为12列
    </LI>
    <LI>
      所以，
       <code>
        col-*-6
      </code>
       跨越12列中的6列（宽度的一半），
       <code>
        col-*-12
      </code>
       跨越12列中的12列（整个宽度）等
    </LI>
  </UL>
  <P>
    所以，如果你想
    的<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>
      三个不相等的列
    </强>
     要跨越相同的宽度，你可以写：
  </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，但要小心超过12，因为您的违规div会降低到下一行（不是
     <code>
      .row
    </code>
    ，这是另一个故事）。
  </p>
  <P>
    你也可以
    的<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也跨越其父div的12列。
    的<strong>
      注意：
    </强>
     因为每个
     <code>
      .col
    </code>
     class的两边都有15px填充，你通常应该将嵌套列包装在一个
     <code>
      .row
    </code>
    ，其边距为-15px。这样可以避免重复填充，并使内容在嵌套和非嵌套col类之间保持一致。
  </p>
  <P>
     - 你没有具体询问
     <code>
      xs, sm, md, lg
    </code>
     用法，但它们是相辅相成的，所以我不禁触摸它......
  </p>
  <P>
    简而言之，它们用于定义哪个
    <EM>
      屏幕尺寸
    </EM>
     该课程应该适用：
  </p>
  <UL>
    <LI>
      的<strong>
        XS
      </强>
       =
      <EM>
        超小屏幕
      </EM>
       （手机）
    </LI>
    <LI>
      的<strong>
        SM
      </强>
       =
      <EM>
        小屏幕
      </EM>
       （片剂）
    </LI>
    <LI>
      的<strong>
        MD
      </强>
       =
      <EM>
        中等屏幕
      </EM>
       （一些台式机）
    </LI>
    <LI>
      的<strong>
        LG
      </强>
       =
      <EM>
        大屏幕
      </EM>
       （其余桌面）
    </LI>
  </UL>
  <BLOCKQUOTE>
    <P>
      阅读
      <a href="https://getbootstrap.com/docs/4.0/layout/grid/#grid-options" rel="noreferrer">
        “
        的<strong>
          格
  选项
        </强>
        “
      </A>
      
  有关详细信息，请参阅官方Bootstrap文档中的章节。
    </p>
  </BLOCKQUOTE>
  <P>
    你应该
    <EM>
      平时
    </EM>
     使用多个列类对div进行分类，因此它的行为会因屏幕大小而异（这是使bootstrap响应的核心）。例如：一个带课程的div
     <code>
      col-xs-6
    </code>
     和
     <code>
      col-sm-4
    </code>
     将跨越手机屏幕的一半（xs）和平板电脑（sm）屏幕的1/3。
  </p>
   <pre>
    <code>
      <div class="col-xs-6 col-sm-4">Column 1</div> 
<div class="col-xs-6 col-sm-8">Column 2</div>

</code>
  </pre>
  <P>
    的<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>
      注意：
    </强>
     如果你没有定义
     <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>
      注意：
    </强>
     如果你的话，那真的很好
     <code>
      .row
    </code>
     包括超过12个cols，只要你知道它们将如何反应。 - 这是一个有争议的问题，并不是每个人都同意。
  </p>
</DIV>

2# 我头上有犄角 | 2019-08-31 10-32

3# 筱梨 | 2019-08-31 10-32