Question

我正在努力让我可以用第二个孩子div.col填充父div.row，但似乎我无法使用bootstrap flex-box使其工作。到目前为止我所尝试的是：

<div class="column col-12 d-flex" >
   <div class="row">
        <div class="column-name col">{this.props.name}</div>
   </div>
   <div class="row align-self-stretch">
        <Lane /> /*React class*/
   </div>
</div>

父div.column正确地填写了它的父级，但我要做的是让第二个div.row填充第一个div.row剩下的剩余空格。这段代码只打破了页面的布局，对我来说它不是一个解决方案，因为它也首先伸展div.row。

Answer 1

基于我们的简短对话，当你可以依赖它的默认行为时，听起来你正试图以奇怪的行为操纵Bootstrap的Grid。而不是尝试对待每个.row，而不应该像列一样;只需使用列。

在Bootstrap 4中还有其他几种方法可以实现等高的列，但这里有一个我个人找到的快速简便的方法：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="h-100 p-3 bg-dark text-light">
        <p>This only has a little bit of text.</p>
      </div>
    </div>
    
    <div class="col">
      <div class="h-100 p-3 bg-info text-light">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
      </div>
    </div>
  </div>
</div>

每列内部都有一个h-100包装器，它强制内容占用可用空间的100％。这将强制每列的高度等于最高的列。

Bootstrap CSS行填充父列

1 个答案: