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

除了没有装订线之外，我还删除了第一个和最后一个填充。可以做到，但是请让我知道是否有更好的方法来适应Bootstrap设计！

div {
  overflow-wrap: break-word;
}

[class^="col-"]:first-child>div {
  padding-left: 0 !important;
}

[class^="col-"]:last-child>div {
  padding-right: 0 !important;
}

<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 no-gutters">
    <div class="col-3">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
    <div class="col-3">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooong text2</div>
    </div>
    <div class="col-6">
      <div class="w-100 p-3 border bg-light">Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
    </div>
  </div>
</div>

Answer 2

接受父div并为其添加CSS

在这里使用父div'content-div'的html代码

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

注意：请尽量避免将CSS分配给引导程序类

如何在没有左右装订线的列之间创建空白？

2 个答案: