css - 行列之间的间距
问题描述
我有包含包含列的行的容器的页面。我想扩大我的列之间的空间
这是我首页的代码。我的第二行的第一列必须是我的第一行的前两列的大小。
<div class="container">
<div class="row">
<div class="col-md-4 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
<div class="col-md-4 card">
row 1 col 3
</div>
</div>
<div class="row">
<div class="col-md-8 card">
row 2 col 1
</div>
<div class="col-md-4 card">
row 2 col 2
</div>
</div>
</div>
对于我的第二页,这是代码
<div class="container">
<div class="row">
<div class="col-md-8 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
</div>
</div>
我是目前 的当前行为
我想扩大我的列之间的空间。在第二行,在扩大我的边距的同时,第一列与第一行的前 2 列保持对齐
我已经用 flex 重做了我的页面,但我仍然无法将第二行的第一列与第一行的前 2 列对齐
<div class="container">
<h3>Title</h3>
<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 1
</mat-card>
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 2
</mat-card>
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 3
</mat-card>
</div>
<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
<mat-card class="bloc-section" fxFlex="67%">
row 2 col 1
</mat-card>
<mat-card class="bloc-section" fxFlex="33%">
row 2 col 2
</mat-card>
</div>
</div>
解决方案
不要试图复制代码。试着理解这个概念,这样你就可以创建任何成绩。
在 Bootstrap,我们有12 列(每行)。这意味着每行必须分配给 12 列
您还应该知道: Bootstrap 3。
注意:它在Bootstrap 4中有所不同。
- xs:屏幕宽度小于 768px
- sm:屏幕宽度等于或大于 768px
- md:屏幕宽度等于或大于 992px
- lg:屏幕宽度等于或大于 1200px
您的示例:
在第一行,我们有 3 个相等的列:12 / 3 = 4
在第二行,我们有 2 个列。第一列 = 前一行的前两列:4 + 4 = 8
xs 示例:< 768px
影响所有尺寸。
.row div div{
border-radius: 10px;
border: 2px solid;
background:#ddF;
text-align:center;
}
.row.mar{
margin-top:2px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-4"><div>.col-xs-4</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
</div>
<div class="row mar">
<div class="col-xs-8"><div>.col-xs-8</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
</div>
</div>
sm 的示例: >= 768px
因此,每列的大小为 12(总计)。小于 768 像素
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
</div>
<div class="row">
<div class="col-sm-8"><div style="background:#ddd;text-align: center;">.col-sm-8</div></div>
<div class="col-sm-4"><div style="background:#fdd;">.col-sm-4</div></div>
</div>
</div>
自定义示例:
- 第一行:
仅xs-4.
适用于所有尺寸。影响所有尺寸,因为没有定义其他尺寸。
- 第二行:(
xs-4 and 4
md-7 and 5
lg-6 and 6
> 1200 (6) and > 992px(7,5)和其他尺寸(4))
.row div p{
border-radius: 10px;
border: 2px solid;
text-align:center;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-4"><p style="background:#E9F9B9;">All-4</p></div>
<div class="col-xs-4"><p style="background:#ddd;">All-4</p></div>
<div class="col-xs-4"><p style="background:#E9FCF9;">All-4</p></div>
</div>
<div class="row">
<div class="col-xs-8 col-md-7 col-lg-6"><p style="background:lavender;">xs-4 md-7 lg-6</p></div>
<div class="col-xs-4 col-md-5 col-lg-6"><p style="background:#FFF1F4">xs-4 md-5 lg-6</p></div>
</div>
</div>
使用弹性盒
如果您使用 Bootstrap 4,则不需要 CSS 代码。
*{
box-sizing: border-box;
}
.flex-container{
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color: lavender;
}
.col-4,.col-8{
position: relative;
width: 100%;
padding-right: 5px;
padding-left: 5px;
box-sizing: border-box;
}
.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-8{
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.flex-container > div div{
background:#E4F1F6;
padding:2px 6px;
margin:5px;
}
<div class="flex-container">
<div class="col-4"><div>1</div></div>
<div class="col-4"><div>2</div></div>
<div class="col-4"><div>3</div></div>
</div>
<div class="flex-container">
<div class="col-8"><div>A</div></div>
<div class="col-4"><div>B</div></div>
</div>
乙
.flex-container {
display: flex;
align-items: stretch;
}
.flex-container > div {
background-color: lavender;
color: black;
margin: 3px;
text-align: center;
width: 33.3%;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 1">3</div>
</div>
<div class="flex-container">
<div style="flex-grow: 2; width: 67%;">A</div>
<div style="flex-grow: 1">B</div>
</div>
推荐阅读
- gnuplot - 从图形的底部到顶部绘制一个正方形 gnuplot
- hackintosh - OpenCore - 戴尔 5577 - 无法让电池工作 Hackintosh
- python - 找不到页面:/Django
- xml - XML : 用另一个 xml 文件的内容替换值以创建一个新文件
- r - 如何使用另一个数据框转换不同汇率的收入?
- react-native - ReactNative 异步函数返回 [object Object]
- java - 编译测试时 Groovy:java.lang.NoClassDefFoundError: Unable to load class org.apache.groovy.jaxb.extensions.JaxbExtensions
- javascript - 永远不会调用 showMessageBox 承诺
- python - Django 数据迁移:将参数传递给 RunPython
- java - Selenium 单击非按钮元素