Карты начальной загрузки выровнены по вертикали

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 s grid-template-columns, чтобы изменить количество столбцов.

Вы также можетепримените CSS к .news, но вам придется переместить заголовок <h4> из него.

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

<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 id="news-grid">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Foo Bar</h4>
        <div class="card-subtitle">
          <p class="eventdate">
            <i class="fa fa-calendar-alt">Geplaatst op d MMMM yyyy</i>
          </p>

        </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">
          <p class="eventdate">
            <i class="fa fa-calendar-alt">Geplaatst op d MMMM yyyy</i>
          </p>
        </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>

</div>