在列上创建边框

Question

我有一个简单的三列网格列模板，我想在第二列和第三列上添加边框，所以我有类似的内容：

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

我想要的结果是添加这样的边框：

如何在第 2 列和第 3 列上创建此边框？此致

Answer 1

您可以将 border rounded-lg 类添加到第二、第三列

要在列之间添加 space，您可以将 gap: 10px 添加到容器中

查看示例

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column border rounded-lg">
    <p>Column 2 </p>
  </div>
  <div class="column border rounded-lg">
    <p>Column 3 </p>
  </div>
</div>

Answer 2

这是一个更纯粹的CSS答案。

我只是在每个 column 周围画一个边框，然后排除第一个，如下所示：

.container {
    display: grid;
    grid-template-columns: auto auto auto;
}

/* draw a border around every column, except the first one */
.column:not(:first-child) {
    border: solid 2px #ddd;
    border-radius: 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

还有更多的伪类，例如https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child。

Answer 3

受@Kareem Dabbeet 回答的启发，这里有一些补充。

        .container {
          display: grid;
          grid-template-columns: auto auto auto;
          gap: 5px;
        }

        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

        <div class="container m-2" *ngIf="selectedMenuItem === menu[3]">
          <div class="column col offset-md-2">
            <div class="row">
              <div>
                <label>Test Test</label>
              </div>
            </div>
            <div class="row">
              <div>
                <label>Test Test Test Test Test, Test/Test</label>
              </div>
            </div>
            <div class="row">
              <div>
                <label>Test Test Test; Test/Test</label>
              </div>
            </div>

          </div>
          <div class="column border rounded p-2">
            <p class="font-weight-bold border-bottom text-center">Column 1a </p>
            <p>Column 1b </p>
            <p>Column 1c </p>
            <p>Column 1d </p>
          </div>
          <div class="column border rounded p-2">
            <p class="font-weight-bold border-bottom text-center">Column 2a </p>
            <p>Column 2b </p>
            <p>Column 3c </p>
            <p>Column 4d </p>        
          </div>
        </div>

在列上创建边框

Create border over column

html

css

bootstrap-4