Question

我正在使用Bootstrap 4.4.1。在我要显示的数据中，由于该列中的信息可能很长，因此第一列必须足够宽。因此，后三列只有Bootstrap的12列中的两列，因此我决定使用嵌套布局。

以下是数据：

<style>
.my-container {
  font-size: 1rem;
}
.data-row {
  font-size: 0.8rem;
}
.my-col {
  border: solid;
  border-width: 2px 0px 0px 2px;
  background-color: lightgrey;
}
.sub-col {
  background-color: pink;
  text-align: center;
}
.last-col {
  border-width: 0px 2px 0px 0px;
  padding: 0px;
}
.bottom-row {
  border-bottom-width: 2px;
}
</style>
<div class="container-fluid my-container">
  <div class="row">
    <div class="col col-8 my-col">Entry Name</div>
    <div class="col col-2 my-col">Contact(s)</div>
    <div class="col col-2 my-col last-col">
      <div class="container-fluid">
        <div class="row">
          <div class="col col-4 my-col sub-col">A</div>
          <div class="col col-4 my-col sub-col">B</div>
          <div class="col col-4 my-col sub-col">C</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row data-row">
    <div class="col col-8 my-col">Entry #1</div>
    <div class="col col-2 my-col">u1@example.com</div>
    <div class="col col-2 my-col last-col">
      <div class="container-fluid">
        <div class="row">
          <div class="col col-4 my-col sub-col">A1</div>
          <div class="col col-4 my-col sub-col">B1</div>
          <div class="col col-4 my-col sub-col">C1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="row data-row">
    <div class="col col-8 my-col bottom-row">Entry #2</div>
    <div class="col col-2 my-col bottom-row">u2a@example.com u2b@example.com</div>
    <div class="col col-2 my-col bottom-row last-col">
      <div class="container-fluid">
        <div class="row">
          <div class="col col-4 my-col sub-col">A2</div>
          <div class="col col-4 my-col sub-col">B2</div>
          <div class="col col-4 my-col sub-col">C2</div>
        </div>
      </div>
    </div>
  </div>

</div>

这是它的样子：

我希望Entry #2行的粉红色部分一直延伸到底部。我怎样才能做到这一点？

Answer 1

您可以使用Bootstrap的h-100属性将div的高度设置为100％。请参阅以下链接： https://jsfiddle.net/csevimli/tchwbk95/1/

Answer 2

如果使用1[p]将container 和 row设置为全高，并将背景色设置为粉红色...

https://codeply.com/p/oTK74DG4YA

h-100

嵌套布局不会在Bootstrap4中延伸到底部

2 个答案: