删除行之间的边距

Question

我想删除hello和dd之间的边距。我该怎么办。

<div className="container border border-primary">
        <div className="row">
          <div className="">A </div>
            <div className="col">
                <div className="row justify-content-between m-0 p-0">
                    <p>hello</p>
                    <p>hello</p>
                </div>
                <div className='row m-0 p-0'>
                    dd
                </div>
            </div>
        </div>
    </div>

Answer 1

您必须删除<p>元素的空白以删除行之间的空间。

您可以通过三种方式解决此问题：

• 在<p>元素本身上使用Bootstrap实用程序类.m-0。
• 用于删除margin元素中的<p>的自定义CSS规则。
• 使用<span>元素代替<p>元素。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container border border-primary">
  <div class="row">
    <div>A</div>
    <div class="col">
      <div class="row justify-content-between m-0 p-0">
        <p class="m-0">hello</p>
        <p class="m-0">hello</p>
      </div>
      <div class='row m-0 p-0'>dd</div>
    </div>
  </div>
</div>

Answer 2

您可以从Bootstrap grid system中使用.no-gutters。

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>