引导卡垂直对齐答案

【问题标题】：Bootstrap cards aligned vertically引导卡垂直对齐
【发布时间】：2019-04-11 23:13:53
【问题描述】：

我想垂直对齐一些引导卡。我需要这个来响应。我试图将父 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>

感谢所有帮助！

【问题讨论】：

垂直对齐如何？你的意思是居中吗？在整个页面上的newspage 内部，彼此相对？请具体说明您要查找的内容。这个问题一直是asked many times before。
您当前的代码生成垂直对齐的卡片。同时显示类.news和.newspage的定义。

标签： html css bootstrap-4

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用display:grid; 来实现这一点。目前我指定它有两列（两张卡并排），但您可以添加和删除grid-template-columns 的1frs 以更改列数。

您也可以将 CSS 应用于 .news，但您必须将 <h4>-heading 移出它。

#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>

【讨论】：