javascript - Bootstrap 等列

Question

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

以下是我们菜单的分割；我们对 CSS/HTML/JS 的形状表示歉意，但不知道如何以其他方式呈现它。

我们正在尝试使所有列/行处于相同高度。我们知道 row-eq-height 但显然做错了。

代码如下:

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

摘录:

<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 中的 native 类。您需要在 CSS 中自行添加和定义它:

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

请注意:此类使用 CSS3 的 Flexbox 布局模式，Internet Explorer 9 及更低版本不支持该模式。欲了解更多信息，请参阅Bootstrap's info 。