【问题标题】：Spacing between col in row行列之间的间距
【发布时间】：2019-10-07 18:24:45
【问题描述】：

我的页面包含包含列的行的容器。我想扩大我的列之间的空间

这是我首页的代码。我的第二行的第一列必须是我的第一行的前两列的大小。

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

我现在是这个 Current Behavior

我想扩大我的列之间的空间。在第二行，在扩大我的边距的同时，第一列与第一行的前 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>

【问题讨论】：

您的问题是什么？从 HTML 中满足您的条件...您只需要添加边距/填充吗？ w3schools.com/code/tryit.asp?filename=G8JDWLUPTDEK
此链接显示彼此下方的列
然后呢？如果你有两行就是这种情况。每行有两行（一行 3 列，一行 2 列）将是与每行所需的代码相同的代码。简而言之，您的问题（并不是刻薄）不是很好/很清楚。
我已经更新了我的问题

标签： css angular twitter-bootstrap row col

【解决方案1】：

你可以像这样添加css

.container .row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

并修复您的模板

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

【讨论】：

它根本不起作用。它甚至破坏了整个设计

【解决方案2】：

不要试图复制代码。尝试理解这个概念，以便您可以创建任何成绩。

在 Bootstrap，我们有 12 列（每行）。这意味着每行必须分配给 12 列

您还应该知道： Bootstrap 3。
注意：Bootstrap 4 不同。

xs：屏幕宽度小于 768 像素
sm：屏幕宽度等于或大于 768 像素
md：屏幕宽度等于或大于 992 像素
lg：屏幕宽度等于或大于 1200 像素

你的例子：
在第一行，我们有 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 4md-7 and 5lg-6 and 6 ( > 1200 (6) 和 > 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>

B

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

【讨论】：

在您使用 col 的示例中，我发现 col 之间没有间隙
在flexbox示例中，第二行的第一列与第一行的前2列不对齐
已编辑。如果我理解正确，您必须学习基础知识。祝你好运。
我尝试使用它们 fxLayout 和 fxFlex 但它总是让我滞后
使用顶部的第一个 flexbox。然后将您的内容粘贴到代码中，而不更改代码。没有 Bootstrap 4，你不需要 CSS 代码（首先是 Flex）。如果您仍有问题，我随时为您服务。您可以提交您的代码。祝你好运

【解决方案3】：

你基本上正在做你应该做的事。您希望引导 md-X 列处理大部分格式。

但是，您的内部元素是您想要对齐的，更具体地说，您应该添加一些：

https://www.w3schools.com/code/tryit.asp?filename=G8K0XRXB2V8B

还有 html / CSS 让它看起来像这样：

<style>
    .filler {
        border-radius: 15px;
        border-style: solid;
    }
</style>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row wide-fill">
    <div class="col-sm-4 spacy" style="background-color:lavender;">
        <div class="filler">.col-sm-4</div>
    </div>
    <div class="col-sm-4 spacy" style="background-color:lavenderblush;">
        <div class="filler">.col-sm-4</div>
    </div>
    <div class="col-sm-4 spacy" style="background-color:lavenderblush;">
        <div class="filler">.col-sm-4</div>
    </div>
  </div>
    <div class="row">
    <div class="col-sm-8 spacy" style="background-color:lavender;">
        <div class="filler">.col-sm-8</div>
    </div>
    <div class="col-sm-4 spacy" style="background-color:lavenderblush;">
            <div class="filler">.col-sm-4</div>
      </div>

  </div>
</div>

【讨论】：

我不想要圆形框架。在我想要空格的列之间。它们在示例中粘合在一起。颜色是胶合的
@totot 这是一个非常清楚的例子来说明它是如何工作的。如果这是您想要的，请删除圆形边框和颜色......但是这个概念似乎正是您想要的
这不知道使用的不同CSS类。我有棱角。不知道有没有别的方法可以切页
不，它没有。从您发布的内容来看，它不需要显示这些内容。 @totot 如果你不能让它工作，那不是因为我提供的 html 或 css。这是因为您的问题显然没有提供所有必要的细节。 Angular 是一个很棒的框架，但不会改变 bootstrap、css 或 HTML 的工作方式。案例和要点，与您在 Angular 中使用引导程序 stackblitz.com/edit/angular-vyo87x 描述的问题相同
我已经用 flex 重做了我的页面，但我仍然无法将第二行的第一列与第一行的前 2 列对齐