bootstrap源码学习：辅助（1）

时间：2017-10-08 22:35:41 阅读：269 评论：0 收藏：0 [点我收藏+]

.blockquote-footer::before {
  content: "\2014 \00A0";
}

引用的脚步~效果是插入了“—”，可以做一个署名。

.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

默认情况下container会有15px的padding左右值。

container会根据媒体尺寸变化而固定改变最大尺寸，而container-fluid并没有这样的设置。

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
}

这里设置了两次width??

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

flex布局~

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

辅助类~消除边距，并且在它之下的col-开头的类元素也都会把边距消除。

.col-1 {
  -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

100/12然后粗略得到了每个col的占有比例。

（鉴于我对flex布局还不是特别清楚，这里只能先留个疙瘩啦！）

.order-1 {
  -ms-flex-order: 1;
      order: 1;
}

这里又是涉及到flex布局，order属性用于更改在主轴方向上排列顺序。order数值越小，排列越靠前，默认为0，可以为负数。

原文地址：http://www.cnblogs.com/rimochiko/p/7638603.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行