html Bootstrap等高柱

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Bootstrap等高柱相关的知识，希望对你有一定的参考价值。


.row-eq-height {
  @media screen and (min-width: 768px) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  
  //para visualizar el efecto - test
  > [class*="col-"] {
	  padding-top: 15px;
  	padding-bottom: 15px;
  	background-color: #eee;
	  border: 1px solid #ddd;
  }
}


// Si tenemos elementos dentro que queremos que se adapten al height

.elemento-dentro {
  display: flex;
}

** Uses flexbox / requires IE9+ **

Source: http://getbootstrap.com.vn/examples/equal-height-columns/

Ver tambien: http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

<div class="row-eq-height">
  <div class="col-sm-6">...</div>
  <div class="col-sm-6">...</div>
</div>

以上是关于html Bootstrap等高柱的主要内容，如果未能解决你的问题，请参考以下文章