行中列之间的间距

Question

我有一些带有容器的页面，这些容器包含包含列的行。我想扩大我的专栏之间的空间

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

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

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

Answer 2

请勿尝试复制代码。尝试理解概念，以便您可以创建任何成绩。

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

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

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

您的示例：在第一行中，我们有3个相等的列：12 / 3 = 4在第二行中，我们有2列。第一列=上一行的前两列：4 + 4 = 8

xs示例：< 768px影响所有大小。

<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" style="background:#ddd;">.col-xs-4</div>
    <div class="col-xs-4">.col-xs-4</div>
    <div class="col-xs-4" style="background:#ddd;">.col-xs-4</div>
  </div>
  <div class="row">
    <div class="col-xs-8" style="background:#ddd;">.col-xs-8</div>
    <div class="col-xs-4" style="">.col-xs-4</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" style="background:#ddd;">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4" style="background:#ddd;">.col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm-8" style="background:#ddd;">.col-sm-8</div>
    <div class="col-sm-4" style="">.col-sm-4</div>
  </div>
</div>

自定义示例：

• [第一行：仅xs-4.适用于所有尺寸。由于未定义其他大小，因此会影响所有大小。
• 第二行：xs-4 and 4md-7 and 5 lg-6 and 6（> 1200（6）和> 992px（7,5）和其他尺寸（4））

<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" style="background:#E9F9B9;">All-4</div>
    <div class="col-xs-4" style="background:#ddd;">All-4</div>
    <div class="col-xs-4" style="background:#E9FCF9;">All-4</div>
  </div>
  <div class="row">
    <div class="col-xs-8 col-md-7 col-lg-6" style="background:lavender;">xs-4  md-7  lg-6</div>
    <div class="col-xs-4 col-md-5 col-lg-6" style="background:#FFF1F4">xs-4  md-5  lg-6</div>
  </div>
</div>

---

使用flexbox

.flex-container {
  display: flex;
  align-items: stretch;
}

.flex-container > div {
  background-color: lavender;
  color: black;
  margin: 2px;
  text-align: center;
}

<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">A</div>
  <div style="flex-grow: 1">B</div>
</div>