css - Bootstrap中“col-md-4”,“col-xs-1”,“col-lg-2”中数字的含义





twitter-bootstrap twitter-bootstrap-3 grid (5)


Bootstrap网格系统有四个类:
xs(手机)
sm(用于平板电脑)
md(用于桌面)
LG(适用于较大的桌面)

上面的类可以组合起来创建更加动态和灵活的布局。

提示:每个类都会放大,因此如果您希望为xs和sm设置相同的宽度,则只需指定xs。

好的,答案很简单,但请继续阅读:

col-lg-代表≥ 1200px
col-md-代表色谱柱介质≥ 992px
col-xs-代表色谱柱超小≥ 768px

像素数是断点,所以例如当窗口小于768像素(可能是移动设备)时col-xs将目标定位到元素...

我还创建了下面的图片来展示网格系统是如何工作的,在这个例子中,我将它们与3一起使用,例如col-lg-6以向您展示网格系统如何在页面中工作,了解lgmdxs是如何工作的响应窗口大小:

我对新的Bootstrap中的网格系统感到困惑,特别是这些类:

col-lg-*
col-md-*
col-xs-*

(其中*代表某个数字)。

任何人都可以请解释以下内容:

  1. 这个数字如何对齐网格?
  2. 如何使用这些数字?
  3. 他们实际上代表什么?






重点是这样的:

col-lg-* col-md-* col-lg-* col-md-* col-xs-* col-sm定义在这些不同的屏幕尺寸下有多少列。

例如:如果您希望桌面屏幕和手机屏幕中有两列,请在列中放置两个col-md-6和两个col-xs-6类。

如果你希望在桌面屏幕上有两列,并且在手机屏幕上只有一列(即两行堆叠在一起),则在列中放置two col-md-6和两个col-xs-12 ,因为总和将是24他们将自动堆叠在彼此的顶部,或只是离开xs风格。




现在忽略字母(x ssmmdlg ),我将从数字开始......

  • 数字(1-12)表示任何div的总宽度的一部分
  • 所有div分为12列
  • 因此, col-*-6横跨12列中的6列(宽度的一半), col-*-12横跨12列中的12列(整个宽度)等

所以,如果你想要两个相等的列跨越一个div,写

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

如果你想要三个不相等的列跨越相同的宽度,你可以写:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

你会注意到列的总数总是等于12.它可以小于12,但是要小心超过12,因为你的违规div会碰到下一行(不是.row ,这完全是另一个故事) 。

您也可以在列中嵌套列 (最好使用围绕它们的.row包装器),例如:

<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>

每套嵌套div也跨越其父母div的12列。 注意:由于每个.col类在两边都有15px的填充,所以通常应该将嵌套的列.row一个.row ,其边距为-15px。 这样可以避免重复填充,并使嵌套和非嵌套col类之间的内容保持一致。

- 你没有具体询问xs, sm, md, lg使用情况,但是他们携手并进,所以我不禁要触及它......

简而言之,它们用于定义该类应适用的屏幕大小

  • xs = 超小屏幕 (手机)
  • sm = 小屏幕 (平板电脑)
  • md = 中等屏幕 (某些桌面)
  • lg = 大屏幕 (其余桌面)

阅读官方Bootstrap文档中的网格选项一章以获取更多详细信息。

通常应该使用多个列类对div进行分类,以便根据屏幕大小(这是启动引导程序响应的核心)具有不同的行为。 例如:类col-xs-6col-sm-4的div将跨过手机屏幕的一半(xs)和平板电脑屏幕的三分之一(sm)。

<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 -->

注:根据下面的评论,给定屏幕尺寸的网格类适用于该屏幕尺寸和更大,除非另一个声明覆盖它(即col-xs-6 col-md-4xs sm上跨越6列,并且在md lg ,即使smlg从未明确声明)

注意:如果你没有定义xs ,它将默认为col-xs-12 (即col-sm-6smmdlg屏幕的宽度的一半,但在xs屏幕上为全角)。

注意:如果您的.row包含超过12列,那么它确实很好,只要您知道它们将如何反应。 - 这是一个有争议的问题,并不是每个人都同意。




我遇到了同样的问题。 在我的情况下,我不知道外部容器的高度,但这是我如何修复它:

首先为你的htmlbody元素设置高度,使它们为100%。 这个很重要! 没有这个, htmlbody元素将简单地继承他们的孩子的身高。

html, body {
   height: 100%;
}

然后我有一个外部容器类:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

最后是带有class的内部容器:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML和以下一样简单:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

这是您需要垂直对齐内容的全部内容。 在小提琴中检查它:

Jsfiddle







css twitter-bootstrap twitter-bootstrap-3 grid