Bootstrap Equal Column

Question

我们被告知要用它来回答问题。

以下是我们菜单的细分;我们为CSS / HTML / JS的形状道歉，但不知道如何呈现它。

我们试图将所有列/行放在同一高度。 我们已经知道了row-eq-height但显然做错了。

代码如下：

完整剪辑： https://pastebin.com/Kc9KTkZU

Exerp：

<div class="row-eq-height">
      <div class="col-md-6 col-md-offset-3">
        <!-- Tab panes -->
        <div class="tab-content faq-cat-content">
          <div class="tab-pane active in fade" id="faq-cat-1">
            <div class="panel-group" id="accordion-cat-1">
              <div class="panel panel-default panel-faq">
                <div class="panel-heading">
                  <a data-parent="#accordion-cat-1" data-toggle="collapse" href="#faq-cat-1-sub-1">
                  <h4 class="panel-title">Sharable Appetizers <span><i class="glyphicon glyphicon-plus"></i></span>
                  <span><img src="images/menu-top-a.png" style="width:100%;"></span></h4></a>
                </div>
                <div class="panel-collapse collapse" id="faq-cat-1-sub-1">
                  <div class="panel-body">
                    <div class="row-eq-height form-group">

Answer 1

.row-eq-height不是Bootstrap中的本机类。您需要在CSS中自行添加和定义它：

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

请注意：此课程使用CSS3的flexbox布局模式，Internet Explorer 9及更低版本不支持此模式。有关详细信息，请参阅Bootstrap's info。

Answer 2

要使所有子元素在父容器中使用flex具有相同的高度，在您的情况下将此添加到您的css

.row-eq-height{
display:flex;
}