Bootstrap 行，列没有拉伸到100%的div高度时，有标题

3okqufwl 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(1)|浏览(135)

有人能解释一下这种行为吗？https://stackblitz.com/edit/jfiypj?file=index.html
正如您所看到的，当DIV的高度为100%并且在其顶部有一个标题时，行和列的高度都不会拉伸到内容的高度。
更新：是的，使列灵活有助于，但为什么高度100%重叠的行，列高度，如果列不是display: flex？

twitter-bootstrap

来源：https://stackoverflow.com/questions/77067110/bootstrap-row-column-is-not-stretched-to-the-100-div-height-inside-when-there

1条答案

按热度按时间

fquxozlt1#

试试这样做divs

<div class="col d-flex">
  <div class="d-flex flex-column justify-content-center">
    <h3>Column</h3>
    <div style="background: yellow; flex-grow: 1">
        Wombats are short-legged, muscular quadrupedal marsupials of the family Vombatidae that are native to Australia.
    </div>
  </div>
</div>

或类似

<div class="container text-center">
  <div class="row">
    <div class="col d-flex flex-column">
      <div style="background: yellow; flex-grow: 1">
        Wombats are short-legged, muscular quadrupedal marsupials of the family Vombatidae that are native to Australia. Living species are about 1 m (40 in) in length with small, stubby tails and weigh between 20...
      </div>
    </div>
    <div class="col d-flex">
     <div class="d-flex flex-column justify-content-center">
     <h3>Column</h3>
      <div style="background: yellow; flex-grow: 1">
        Wombats are short-legged, muscular quadrupedal marsupials of the family Vombatidae that are native to Australia.
      </div>
    </div>
    </div>
    <div class="col d-flex flex-column">
      <h3>Column</h3>
      <div style="background: yellow; flex-grow: 1"> 
        Wombats are short-legged, muscular quadrupedal marsupials of the family Vombatidae that are native to Australia. Living species are about 1 m (40 in) in length with small, stubby tails and weigh between 20...
      </div>
    </div>
  </div>
</div>

两者都应该起作用

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap 行，列没有拉伸到100%的div高度时，有标题

1条答案

相关问题

热门标签

最新问答