css - 如何在没有左右间距的列之间创建空白？

Question

我想在列之间创建指定数量的空间。所以我根据 the answers I already had 创建了这个.但这有一个向右溢出。我想自己消除这个溢出，因为我不能指定 overflow: hidden 由于其他组件的干扰:

.row {
  margin: 0 -25px;
}

.col {
  padding: 0 25px;
  min-width: 0;
}

div {
  overflow-wrap: break-word;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row">
    <div class="col">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
    <div class="col">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
  </div>
</div>

我还看到了这支笔:https://codepen.io/frouo/pen/OqGaWN

Answer 1

拿一个父div并给他们一个css

这里是你的 html 代码和父 div 'content-div'

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
  <div class="row">
    <div class="col">
            <div class="content-div">
                <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
            </div>
    </div>
    <div class="col">
            <div class="content-div">
                <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
            </div>
    </div>
  </div>
</div>

CSS

.content-div {
  padding: 0 25px;
  max-width: 150px;
}

Note: Try to avoid assign css to bootstrap classes