我想在列之间创建指定的空间量。所以我基于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
最佳答案
拿一个父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分配给引导类