使 Bootstrap 卡的高度相同

【问题标题】：Make Bootstrap card same height使 Bootstrap 卡的高度相同
【发布时间】：2019-01-13 11:08:32
【问题描述】：

我正在使用 Bootstrap 3 制作联系页面。每个员工都有自己的 Bootstrap 卡。并非每个人都应该在卡上提供联系信息。但我希望卡片彼此水平对齐。

我可以通过设置边距或填充来做到这一点，但据我所知，这不是一个正确的解决方案？

如何让卡片相互对齐？

/* Grid css */

.index-content .card {
  background-color: #FFFFFF;
  padding: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.index-content .card img {
  width: 100%;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.index-content .card h4 {
  margin: 20px;
}

.index-content .card p {
  margin: 20px;
  opacity: 0.65;
}


/* Set width between block elements */

.small-padding.top {
  padding-top: 10px;
}

.small-padding.bottom {
  padding-bottom: 10px;
}

.small-padding.left {
  padding-left: 5px;
}

.small-padding.right {
  padding-right: 5px;
}

.margin_bottom {
  margin-bottom: 10px;
}


/*
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    */

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

.img-responsive {
  height: 100%;
}


/* Set full width on columns */

@media (max-width: 768px) {
  .img-responsive {
    width: 100%;
  }
  .index-content .card img {
    height: 100%
  }
  .index-content .card p {
    padding: 0 20px 10px;
    margin: 0;
  }
  /*
        .row [class*="col-"] {
            padding-right: 10px;
            padding-left: 10px;
        }
        .row {
            margin-left: -20px;
            margin-right: -20px;
        }
        */
}

@media (max-width: 991px) {
  h3 {
    font-size: 1.2em;
  }
}


/* GRID ELEMENTS MEDIA QUERIES */

@media (min-width: 768px) {
  .card {
    position: relative;
  }
  .card-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .card-content h4,
  .card-content p {
    color: white;
    width: 100%;
    float: left;
    margin: 0 0 5px;
  }
  .card-content a {
    float: right;
  }
  .index-content .card h4,
  .index-content .card p {
    padding: 15px 20px;
    margin: 0;
  }
  .index-content .card p {
    padding: 0 20px 10px;
    margin: 0;
  }
  .card-content-textbox {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.7);
    margin: 15px;
    max-width: 300px;
    height: 91%
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h2>Sale</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <h2>Support</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salg</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salg</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> Salg</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-3 small-padding right bottom">
        <div class="index-content">
          <div class="card">
            <img src="http://vouzalis.dk/Anonym.jpg"></img>
            <div>
              <h4>Forname Lastname</h4>
              <p><span class="glyphicon glyphicon-user"></span> International export</p>
              <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
              <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

【问题讨论】：

  • 在可变高度块上设置最小高度

标签： html css twitter-bootstrap-3


【解决方案1】：

最小高度可以帮助您。

.index-content .card {
      min-height: 441px;
      background-color: #FFFFFF;
      padding: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }


/* Grid css */
    .index-content .card {
      min-height: 441px;
      background-color: #FFFFFF;
      padding: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
    .index-content .card img {
      width: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .index-content .card h4 {
      margin: 20px;
    }
    .index-content .card p {
      margin: 20px;
      opacity: 0.65;
    }
   
    /* Set width between block elements */
    .small-padding.top {
       padding-top:10px;
    }

    .small-padding.bottom {
        padding-bottom:10px;
    }
    
    .small-padding.left {
        padding-left:5px;
    }

    .small-padding.right {
        padding-right:5px;
    }
    
    .margin_bottom {
      margin-bottom: 10px;
    }
    /*
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    */
    .card-img-bottom {
      color: #fff;
      height: 20rem;
      background: url(images/img1.jpg) center no-repeat;
      background-size: cover;
    }
    
    .img-responsive { 
        height: 100%;
    }
    
    /* Set full width on columns */
    @media (max-width: 768px) {
        .img-responsive {
            width: 100%;
        }
        .index-content .card img {
            height: 100% }
       
        .index-content .card p {
            padding: 0 20px 10px;
            margin: 0;
          }
          /*
        .row [class*="col-"] {
            padding-right: 10px;
            padding-left: 10px;
        }
        .row {
            margin-left: -20px;
            margin-right: -20px;
        }
        */
    }

    @media (max-width: 991px) {
      h3 {
        font-size: 1.2em;

      }

    }

    /* GRID ELEMENTS MEDIA QUERIES */
    @media (min-width: 768px) {
      .card {
        position: relative;
      }
      .card-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
      }
      .card-content h4,
      .card-content p {
        color: white;
        width: 100%;
        float: left;
        margin: 0 0 5px;
      }
      .card-content a {
        float: right;
      }
      .index-content .card h4,
      .index-content .card p {
        padding: 15px 20px;
        margin: 0;
      }
      .index-content .card p {
        padding: 0 20px 10px;
        margin: 0;
      }
      .card-content-textbox {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.7);
        margin: 15px;
        max-width: 300px;
        height: 91%
      }
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
   	<div class="row">
		<div class="col-sm-12">
			<h2>Sale</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
		</div>
	</div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
		<div class="col-sm-12">
			<h2>Support</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
		</div>
	</div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> International export</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

  • 感谢您的建议。我刚刚尝试了您的解决方案，但可以看到它没有做任何事情？
  • 奇数。你的目标是正确的 CSS 选择器吗？也试试你的开发工具，看看min-height 是否被应用。
【解决方案2】： 

/* Grid css */
    .index-content .card {
      background-color: #FFFFFF;
      padding: 0;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
    .index-content .card img {
      width: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .index-content .card h4 {
      margin: 20px;
    }
    .index-content .card p {
      margin: 20px;
      opacity: 0.65;
    }
   
    /* Set width between block elements */
    .small-padding.top {
       padding-top:10px;
    }

    .small-padding.bottom {
        padding-bottom:10px;
    }
    
    .small-padding.left {
        padding-left:5px;
    }

    .small-padding.right {
        padding-right:5px;
    }
    
    .margin_bottom {
      margin-bottom: 10px;
    }
    /*
    .row [class*="col-"] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .row {
      margin-left: -5px;
      margin-right: -5px;
    }
    */
    .card-img-bottom {
      color: #fff;
      height: 20rem;
      background: url(images/img1.jpg) center no-repeat;
      background-size: cover;
    }
    
    .img-responsive { 
        height: 100%;
    }
    
    /* Set full width on columns */
    @media (max-width: 768px) {
        .img-responsive {
            width: 100%;
        }
        .index-content .card img {
            height: 100% }
       
        .index-content .card p {
            padding: 0 20px 10px;
            margin: 0;
          }
          /*
        .row [class*="col-"] {
            padding-right: 10px;
            padding-left: 10px;
        }
        .row {
            margin-left: -20px;
            margin-right: -20px;
        }
        */
    }

    @media (max-width: 991px) {
      h3 {
        font-size: 1.2em;

      }

    }

    /* GRID ELEMENTS MEDIA QUERIES */
    @media (min-width: 768px) {
      .card {
        position: relative;
      }
      .card-content {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
      }
      .card-content h4,
      .card-content p {
        color: white;
        width: 100%;
        float: left;
        margin: 0 0 5px;
      }
      .card-content a {
        float: right;
      }
      .index-content .card h4,
      .index-content .card p {
        padding: 15px 20px;
        margin: 0;
      }
      .index-content .card p {
        padding: 0 20px 10px;
        margin: 0;
      }
      .card-content-textbox {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(255, 255, 255, 0.7);
        margin: 15px;
        max-width: 300px;
        height: 91%
      }
    }
    
    .card{
      min-height:386px;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    
<div class="container-fluid">
   	<div class="row">
		<div class="col-sm-12">
			<h2>Sale</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
		</div>
	</div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
		<div class="col-sm-12">
			<h2>Support</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
		</div>
	</div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-3 small-padding right bottom">
            <div class="index-content">
                <div class="card">
                    <img src="http://vouzalis.dk/Anonym.jpg"></img>
                    <div>
                        <h4>Forname Lastname</h4>
                        <p><span class="glyphicon glyphicon-user"></span> International export</p>
                        <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
                        <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

向卡片类添加最小高度将解决您的问题..

【讨论】：

    【解决方案3】： 
    var minHeight = parseInt(0);
$(".card").each(function(){
  if($(this).outerHeight() > minHeight){
    minHeight = $(this).outerHeight();
  }
});
$('.card').css('height', minHeight);

    它适用于相同的高度

    【讨论】：

      【解决方案4】：

      在卡信息上使用min-height: 139px;。如果您始终希望卡片信息为该高度，请将最大高度属性设置为相同的值。

      【讨论】：

        【解决方案5】：
        【解决方案6】：

        这可能对您有所帮助... 我在卡片的文本块中添加了最小高度

            /* Grid css */
        .index-content .card {
          background-color: #FFFFFF;
          padding: 0;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        }
        .index-content .card img {
          width: 100%;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
        }
        .index-content .card h4 {
          margin: 20px;
        }
        .index-content .card p {
          margin: 20px;
          opacity: 0.65;
        }
       
        /* Set width between block elements */
        .small-padding.top {
           padding-top:10px;
        }

        .small-padding.bottom {
            padding-bottom:10px;
        }
        
        .small-padding.left {
            padding-left:5px;
        }

        .small-padding.right {
            padding-right:5px;
        }
        
        .margin_bottom {
          margin-bottom: 10px;
        }
        /*
        .row [class*="col-"] {
          padding-right: 5px;
          padding-left: 5px;
        }
        .row {
          margin-left: -5px;
          margin-right: -5px;
        }
        */
        .card-img-bottom {
          color: #fff;
          height: 20rem;
          background: url(images/img1.jpg) center no-repeat;
          background-size: cover;
        }
        
        .img-responsive { 
            height: 100%;
        }
        
        /* Added min height */            
        .card > div {min-height:130px;}
  
        /* Set full width on columns */
        @media (max-width: 768px) {
            .img-responsive {
                width: 100%;
            }
            .index-content .card img {
                height: 100% }
           
            .index-content .card p {
                padding: 0 20px 10px;
                margin: 0;
              }
              /*
            .row [class*="col-"] {
                padding-right: 10px;
                padding-left: 10px;
            }
            .row {
                margin-left: -20px;
                margin-right: -20px;
            }
            */
        }

        @media (max-width: 991px) {
          h3 {
            font-size: 1.2em;

          }

        }

        /* GRID ELEMENTS MEDIA QUERIES */
        @media (min-width: 768px) {
          .card {
            position: relative;
          }
          .card-content {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
          }
          .card-content h4,
          .card-content p {
            color: white;
            width: 100%;
            float: left;
            margin: 0 0 5px;
          }
          .card-content a {
            float: right;
          }
          .index-content .card h4,
          .index-content .card p {
            padding: 15px 20px;
            margin: 0;
          }
          .index-content .card p {
            padding: 0 20px 10px;
            margin: 0;
          }
          .card-content-textbox {
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.7);
            margin: 15px;
            max-width: 300px;
            height: 92%;
          }
        }
            <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>
    <body>
        
    <div class="container-fluid">
       	<div class="row">
    		<div class="col-sm-12">
    			<h2>Sale</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
    		</div>
    	</div>
        <div class="row">
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Indkøbschef</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 3 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Katalog ansvarlig</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
    		<div class="col-sm-12">
    			<h2>Support</h2>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
    		</div>
    	</div>
        <div class="row">
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salgschef</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12 34 56 78</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> Salg</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-3 small-padding right bottom">
                <div class="index-content">
                    <div class="card">
                        <img src="http://vouzalis.dk/Anonym.jpg"></img>
                        <div>
                            <h4>Forname Lastname</h4>
                            <p><span class="glyphicon glyphicon-user"></span> International export</p>
                            <p><span class="glyphicon glyphicon-envelope"></span><a href="mailto:name@companyname.dk"> name@companyname.dk</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4512345678"> +45 12345678</a></p>
                            <p><span class="glyphicon glyphicon-earphone"></span><a href="tel:+4912345678"> +49 12345678</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </body>
    </html>

        【讨论】：

          猜你喜欢
          • 2023-01-13
          • 2017-11-11
          • 1970-01-01
          • 2020-02-02
          • 2020-12-04
          • 2020-10-03
          • 1970-01-01
          • 2016-06-22
          • 2016-09-14
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode