Question

https://codepen.io/guifeliper/pen/QBNjJP/

    .row{
    overflow: hidden;
  }

 .row [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
  }

如何在第2列内的元素之间分配高度？

上面的代码按第一列（Amet）/第二列（Lorem / Ipsum / Dolor）划分我们可以看到，第二列的高度与第一列的高度相同，尽管内部元素未跟随其高度，但由于它们也是行，因此未分配其高度。那么我如何才能使行满足第二列的要求，但又要分配高度呢？还是仅最后一项可以满足剩余空间？

Answer 1

我想填补所有空白并在行之间分配高度，尽管我的解决方案得到了最后一项并填补了空白。对于Bootstrap 4：

        <amp-state id="productsState" src="https://www.newsapp.io/amp">
        </amp-state>

        <!-- ... while the `amp-state` with id `product` is just used to implement the show-more logic where we are allowing the user to click 3 times. -->
        <amp-state id="product">
            <script type="application/json">
                {
                    "moreItemsPageIndex": 0,
                    "hasMorePages": true
                }
            </script>
        </amp-state>


        <!-- We bind the `src` attribute of the `amp-list` to the `amp-state` object containing the products
            from that component as a `src`. We also dynamically change the height of the amp-list based on
            the number of items (each item has a height of `24px`). -->
        <amp-list src="https://www.newsapp.io/amp"
                  [src]="productsState.items"
                  width="auto"
                  height="600"
                  [height]="productsState.items.length * 10"
                  class="m1">
            <template type="amp-mustache"><div class="card mt1">
                    <amp-img src="{{approved_image}}" width="5" height="2" layout="responsive" alt="The final spritzer" class="mb1"></amp-img>

                    <h3 class="mb1 px3"><a href="">{{approved_title}}</a> </h3>

                    <i class="px3">{{timeago}} ago</i>

                    <ul class="ampstart-social-follow list-reset flex  flex-wrap m0 mb1 px3">
                        <li>
                            <a href="http://www.facebook.com/share.php?u={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-facebook-square"></i></a>
                        </li>
                        <li>
                            <a href="https://twitter.com/share?url={{name}}&text={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-twitter-square"></i></a>
                        </li>
                        <li>
                            <a href="https://plus.google.com/share?url={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-linkedin"></i></a>
                        </li>
                        <li>
                            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-google-plus-square"></i></a>
                        </li>
                        <li>
                            <a href="whatsapp://send?text={{name}}" target="_blank" class="inline-block p1" aria-label="Link to AMP HTML Twitter"><i class="fab fa-whatsapp-square"></i></a>
                        </li>
                    </ul>



                    <p class="mb1 px3">{{approved_description}} </p>

                    <div class="px3">
                        <button class="ampstart-btn ampstart-btn-secondary mb1 px3">
                            Read more
                        </button>
                    </div>
                </div>
            </template>
        </amp-list>

        <!-- The show more button is implemented via a form which triggers a page update on the `submit-success` event.
            We are then merging the form results into the items already loaded by the `amp-state` using the `concat` function. -->
        <form method="GET"
              action="relatedamp#aeohig"
              action-xhr="relatedamp"
              target="_top"
              on="submit-success: AMP.setState({
          productsState: {
            items: productsState.items.concat(event.response.items)
          },
          product: {
            moreItemsPageIndex: product.moreItemsPageIndex + 1,
            hasMorePages: event.response.hasMorePages
          }
        });">
            <input type="hidden" name="moreItemsPageIndex" value="0" [value]="product.moreItemsPageIndex">
            <input type="submit"
                   value="Show more"
                   class="ampstart-btn caps m1 show"
                   [class] = "(product.hasMorePages == false ? 'hide' : 'ampstart-btn caps m1 mb3 show')">
        </form>

对于Bootstrap 3：

.second-column > .row:last-child{
  height:100%;
}

Demo

Answer 2

只需将以下内容添加到您的CSS中：

.row{ overflow: hidden; height: 100%; }

如何通过引导行分配和满足身高？

2 个答案: