Question

我有一个多行的容器。在每一行中，我都有几列。我想增加每列之间的空间

<div class="main" style="margin-bottom:0px">
  <div class="container">
    <div class="row">
      <div class="col-md-4 card ">
        Colonne 1
      </div>

      <div class="col-md-4 card">
        Colonne 2
      </div>

      <div class="col-md-4 card">
        Colonne 3
      </div>
    </div>
  </div>
<div>

Answer 1

当您想要相同的宽度时，代替usind col-x，您可以只使用col，它们将以相等的宽度跨行，并允许您添加水平边距。

示例

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="main" style="margin-bottom:0px">
      <div class="container">
        <div class="row">
          <div class="col  card mx-1 ">
            Colonne 1
          </div>

          <div class="col card mx-1">
            Colonne 2
          </div>

          <div class="col  card mx-1">
            Colonne 3
          </div>
        </div>
      </div>
    <div>

mx-1

资源：

https://getbootstrap.com/docs/4.0/utilities/spacing/


t-对于设置margin-top或padding-top的类

b-对于设置边距底边或填充边底的类

l-对于设置margin-left或padding-left的类

r-对于设置了margin-right或padding-right的类

x-对于同时设置* -left和* -right的类

y-对于同时设置* -top和* -bottom
的类
空白-对于在元素的所有4个面上设置边距或填充的类

这是添加col类的原因

https://getbootstrap.com/docs/4.0/layout/grid/ 在其中可以找到import psutil import time import matplotlib.pyplot as plt plt.rcParams['animation.html'] = 'html5' %matplotlib inline fig = plt.figure() ax = fig.add_subplot(111) fig.show() x,y=[],[] i=0 while True: x.append(i) y.append(psutil.cpu_percent()) ax.plot(x, y, color= 'b') fig.canvas.draw() ax.set_xlim(left=max(0,i-50), right=i+50) time.sleep(0.1) i = i + 1类，该类用于自动调整列的大小，如果所有框都收到col类，则它们的宽度应相等。

Answer 2

使用CSS边距属性。

.card {
  margin: 0px 10px;
}

工作示例

.card {
  margin: 0px 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="main" style="margin-bottom:0px">
  <div class="container">
    <div class="row">
      <div class="col col-md-4 card ">
        Colonne 1
      </div>

      <div class="col col-md-4 card">
        Colonne 2
      </div>

      <div class="col col-md-4 card">
        Colonne 3
      </div>
    </div>
  </div>
<div>

Answer 3

Bootstrap列之间没有空格。在默认情况下，在内部设置另一个div时，第4列的填充为15px，这意味着如果在内部设置div，则左侧和右侧都将留有空间。

<div class="col-sm-4">
   <div class="inner">
     Your Content Here
   </div>
</div>

Answer 4

<div class="container">
<div class="card-deck text-center mb-5">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">test</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">test</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">test</h5>
      <hr class="w-50">
      <p class="text-left ml-3 mt-3"></p>
    </div>
  </div>
</div>
</div>

我将此用于卡片，我认为这是您要寻找的东西。让我保持更新！ ;）

列之间的容器行空间

4 个答案: