Question

我使用bootstrap 4.0.0-beta.2，我有一个CSS问题。我想要关注布局这是html：

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
 <div id="task" class="container">
      <div class="row">
        <div class="col-12">
          <div class="card card-shadow">
            <div class="card-header accent-color">
              FOOOOOOOO
            </div>
            <div class="card-body">
              <h4 class="card-title">BAAAR</h4>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
              <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="card card-shadow" id="paint">
            <div class="card-header accent-color">
              paint
            </div>
            <div class="card-body">
              <app-paint></app-paint>
            </div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

我想要创建的是卡的布局。我希望第一张卡片保持在col-12宽度内，并在内容后调整高度。然后我希望第二个div始终在页面底部结束。没有余地。所以我试图添加位置：固定，底部：0和高度：100％然后宽度变得很奇怪，它无法处理页面的大小调整。那么如何强制第二个div在页面底部结束？

Answer 1

您可以使用高度和边距。

Boostrap类：.h-100设置height:100%，但父级需要一个高度，其中％可以从（为html＆amp; body添加的css）计算

margin-top：auto和bottom 0将发送底部的第二个元素。使用的boostrp类：mt-auto mb-0

＆＃13;

html,
body {
  height: 100%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
  <div class="row h-100"><!-- class added -->
    <div class="col-12">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col-12 mb-0 mt-auto"><!-- class added -->
      <div class="card card-shadow" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

或者您是否需要扩展第二个div？

＆＃13;

html,
body {
  height: 100%;
}

.custom-flex {
  flex: 1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
  <!-- class added -->
  <div class="d-flex flex-column h-100">
    <div class="">
      <div class="card card-shadow">
        <div class="card-header accent-color">
          FOOOOOOOO
        </div>
        <div class="card-body">
          <h4 class="card-title">BAAAR</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
          <a href="#" class="btn btn-primary btn-answer">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column custom-flex">
      <div class="card card-shadow custom-flex" id="paint">
        <div class="card-header accent-color">
          paint
        </div>
        <div class="card-body">
          <app-paint>app-paint</app-paint>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我认为这个问题的答案是改变卡的CSS。如果您正在寻找从顶部或底部增加或减少卡之间的空间，您应该像这样更改css：

在卡片阴影的情况下，它将是

.d-flex [class*='card-shadow'] {
   margin-top: 2.5em;
   margin-bottm: 2.5em;
}

使用您自己的单位进行css计算em，px或任何适合您的单位。

在页面底部剪切div

2 个答案: