Question

使div在行内具有相同高度的方法是什么？

它表示默认情况下bootstrap4在任何地方都是flex，但它不能用于某种未知原因

        <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="content" >
            <div class="sub_title"> HISTORY </div>
            <div class="desc"> Sometext </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-sm-6 col-md-6 col-lg">
          <div class="content">
            <div class="sub_title">
              <div class="number"> 2012 </div>
            </div>
            <div class="desc"> some other text </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-6 col-lg ">
          <div class="content">
            <div class="sub_title">
              <div class="number"> 2014 </div>
            </div>
            <div class="desc"> More text </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-md-6 col-lg ">
          <div class="content">
            <div class="sub_title">
              <div class="number"> 2017 </div>
            </div>
            <div class="desc"> Text here too </div>
          </div>
        </div>
      </div>

scss

.content {
        @extend .effect8;
        background: white;
        margin: 10px;
        padding: 10px 30px 20px;
        span {
          display: block;
          p {
            font-weight: bold;
          }
        }
      }

.sub_title {
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  color: $blue;
  margin: 10px auto;
}

这是内容和sub_title类的scss

Answer 1

如果您希望每个.content都.col为全高，则内容应为height:100%;。我不知道.effect8的CSS def。

.content {
        background: white;
        margin: 10px;
        padding: 10px 30px 20px;
        height: 100%;
        span {
          display: block;
          p {
            font-weight: bold;
          }
        }
 }

https://www.codeply.com/go/B4g6TlSDkA

Answer 2

实际上它取决于浏览器，例如在 Safari 中它可能无效，而且 Internet Explorer 也可能有不良行为。

如果您真的想要平等并避免跨浏览器问题，请尝试JS解决方案，例如http://brm.io/jquery-match-height/

boostrap 4等高不起作用

2 个答案: