Question

我想垂直对齐一些引导卡。我需要这个来回应。我试图将父div的宽度设置为较小，但这对我没有帮助。我所拥有的：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="news newspage">
  <h4 class="heading">Nieuws</h4>

  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Foo Bar</h4>
      <div class="card-subtitle">
        <span class="eventdate">
            <i class="fa fa-calendar-alt"></i> Geplaatst op d MMMM yyyy
        </span>
      </div>
      <div class="card-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <a href="#" class="card-link"> > Lees het hele bericht</a>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Foo Bar</h4>
      <div class="card-subtitle">
        <span class="eventdate">
            <i class="fa fa-calendar-alt"></i> Geplaatst op d MMMM yyyy
        </span>
      </div>
      <div class="card-text">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
      <a href="#" class="card-link"> > Lees het hele bericht</a>
    </div>
  </div>



</div>

感谢所有帮助！

Answer 1

您可以将它们放在行和列中，并且行将垂直堆叠。如果您想要特定的宽度，则可以使用col- *类之一

<div class="news newspage">
    <h4 class="heading">Nieuws</h4>
    @foreach (var _news in Model.News)
    {
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@_news.NewsTitle</h4>
                        <div class="card-subtitle">
                            <span class="eventdate">
                                <i class="fa fa-calendar-alt"></i> Geplaatst op @_news.PostedOn.ToString("d MMMM yyyy")
                            </span>
                        </div>
                        <div class="card-text">
                            <p>
                                @_news.NewsArticle
                            </p>
                        </div>
                        <a href="#" class="card-link"> > Lees het hele bericht</a>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

Answer 2

您可以使用display:grid;来实现。目前，我指定它具有两列（并排两张卡），但是您可以添加和删除1fr的{{1}}来更改列的数量。

您还可以将CSS应用于grid-template-columns，但必须将.news标题移出。

<h4>

#news-grid {
  display: grid;
  grid-column-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

引导卡垂直对齐

2 个答案: