Twitter Bootstrap:网格高度相同 [英] Twitter Bootstrap : Same height for grid

查看：28
本文介绍了Twitter Bootstrap:网格高度相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 Bootstrap 4，我希望我的部分具有相同的高度.但是我只想放大内容

(不是页眉和页脚)

section {背景:#ccc;边框:1px 实心 #000}标题{背景:红色；颜色:#ff}页脚{背景:蓝色；颜色:#ff}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="样式表"/><div class="row"><div class="col-3"><部分><标题>标题</标题><div class="内容"><ul><li>第 1 项

<页脚>页脚</页脚></节>

<div class="col-3"><部分><标题>标题</标题><div class="内容"><ul><li>第 1 项<li>第 2 项

<页脚>页脚</页脚></节>

<div class="col-3"><部分><标题>标题</标题><div class="内容"><ul><li>第 1 项<li>第 2 项<li>第 3 项<li>第 4 项

<页脚>页脚</页脚></节>

你能帮我吗?

解决方案 

section {背景:#ccc;边框:1px 实心 #000；高度:100%；显示:弹性！重要；弹性方向:列；对齐内容:间隔；}标题{背景:红色；颜色:#ff}页脚{背景:蓝色；颜色:#ff}.内容 {弹性:1 0 自动；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="样式表"/><div class="row"><div class="col-3"><部分><标题>标题</标题><div class="内容"><ul><li>第 1 项

<页脚>页脚</页脚></节>

<div class="col-3"><部分><标题>标题</标题><div class="内容"><ul><li>第 1 项<li>第 2 项

<页脚>页脚</页脚></节>

<div class="col-3"><部分><标题>标题</标题><div class="内容"><ul><li>第 1 项<li>第 2 项<li>第 3 项<li>第 4 项

<页脚>页脚</页脚></节>

With Bootstrap 4, I want to same height for my sections. But I want to enlarge only content <div class="content"> (Not the header and the footer)

section {
  background: #ccc;
  border: 1px solid #000
}

header {
  background: red;
  color: #fff
}

footer {
  background: blue;
  color: #fff
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
          <li>
            Item 3
          </li>
          <li>
            Item 4
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
</div>

Can you help me?

解决方案 

section {
  background: #ccc;
  border: 1px solid #000;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  align-content: space-between;
}

header {
  background: red;
  color: #fff
}

footer {
  background: blue;
  color: #fff
}

.content {
  flex: 1 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
  <div class="col-3">
    <section>
      <header>
        Title
      </header>
      <div class="content">
        <ul>
          <li>
            Item 1
          </li>
          <li>
            Item 2
          </li>
          <li>
            Item 3
          </li>
          <li>
            Item 4
          </li>
        </ul>
      </div>
      <footer>
        Footer
      </footer>
    </section>
  </div>
</div>

这篇关于Twitter Bootstrap:网格高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆